- ベストアンサー
IEで表示されてしまう余白をなくす方法
- ブログポータルのテンプレをカスタマイズしたことがあるレベルの私ですが、今回初めてHPを作っています。トップページに、jQueryでスライドショーを設置しているのですが、IEで確認したところ、そのスライドショーの上下に、不要な余白ができてしまいます。
- スライドショーが参照しているCSSに原因があるんだろうということは、なんとなく分かるのですが、解決方法がわかりません。
- ソースを見てもらったほうが確実と思いますので、URL記載します。ほかにも、HTMLの不備などありましたらご指摘下さい。よろしくお願いいたします。
- Catherine-100
- お礼率50% (1/2)
- CSS
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
#top内部で、div#header_titleと、div#header_otherが、floatで左右に振られていますが、そのあとにブロックの高さを固定する"clear:both"が入っていません。 そのためdiv#header_titleと、div#header_otherの高さが変になって（ここがブラウザ依存）、div.crossFaderの「見え位置」に干渉している可能性があります。 div#header_title、div#header_otherも全部position:absoluteにするか、div#header_title、div#header_otherの外側にdivを設置して、clearFixをかけ、この両者の配置を固定しましょう。 そうすれば、div.crossFaderの位置に苦しむ必要はなくなります。 「clearFixをし忘れたfloatの後に、absoluteなボックスを重ねた」ということで。 IE9では特に表示が崩れているように見えないので、IE8の開発者ツール<Ctrl＋F12>でHTML要素をチェックしてみればいいと思います。 ちなみに、transitinalでも全然問題ないよwwwwww
その他の回答 (1)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
いまどき、transitinalはないでしょう。 ⇒HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )1999年 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> もちろんチェックはしておくこと ⇒Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html ) どうしてもtransitinalが必要なら <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> これで解決しなかったら、あらためて
補足
ご回答頂きありがとうございます。 アドバイス頂きましたように、strictで書き出してチェッカーにかけましたら、多数のエラーが返ってきましたので、<!DOCTYPE html>にしてみました。 当該の表示がうまくいかない部分には、変化ありません。
お礼
ご回答ありがとうございます。 transitinalでも大丈夫ですか＾＾； ご指摘の通りclear:bothで解除したところ、上の余白が詰まりました！ （下はそのまま・・・。） すみません、ちなみにIE7（以前）の現象のようで、IE8以降では、改変前のコードでも大丈夫でした。 とりあえず、これで進めたいと思います。 的確＆明解なご回答に感謝します。