原因不明？でフッターに空白が出来てしまう問題は楽天市場のモーションウィジェットだった
Webサイトにいつの間にかフッター部分に空白が！
そこでHTML、CSSを徹底的に調べ直したが原因が見つからない
これは困り果てて
最終的に、HTMLの要素をしらみつぶしに消していった
箇所ごとじゃなくて、HTMLがまっさらになるように一つ一つ消していった
それのお陰でやっと発見
原因は楽天アフィリエイトのモーションウィジェットでした
複数設置していたので、1箇所ずつ消して戻す、次を消して戻すの確認では
特定できなかったのも複数設置してたからです
結構時間がかかって大変だったんですが
分かってしまえば、こんなことだったのか・・・と
分かってしまえばこっちのもんです
モーションウィジェットを必ず使いたいのなら、それを考慮したフッターのデザインにしてしまう
方法1
フッターの隙間が合ってもなくても代わり映えしないデザインにする
方法2
ネガティブマージンで隙間を殺す footer{margin-bottom:-25px;}
-25pxでピタリ消えました(ケースによって違うかも)
方法2はCSSをちょこっと加えるだけなので楽です
なんで隙間が出来てしまうのかというと
bodyの下にimgが追加されてしまっているのです
これが原因、インプレッションを測るためのものと思われます
imgでwidth=”0″となっているので
このパラメータがあるタグを非表示にしてしまう方法もあります
なんか弊害があったら嫌なので自分は。方法1か方法2を使います
他の原因の場合は、phpをBOM有りのUTF-8で保存してる時も、なったりしますので
その時はBOM無しのUTF-8にすればOKです UTF-8Nとの表記されます
※方法2のCSSのスペルが間違っていたので修正しました。
楽天モーションウィジェットが原因の場合はこちらの方法も使えます
楽天モーションウィジェットでサイトのデザインに空白ができてしまう問題をPositionで克服
COMMENT