IEで表示されてしまう余白をなくしたい

Question

ブログポータルのテンプレをカスタマイズしたことがあるレベルの私ですが、今回初めてHPを作っています。

トップページに、jQueryでスライドショーを設置しているのですが、IEで確認したところ、そのスライドショーの上下に、不要な余白ができてしまいます。
スライドショーが参照しているCSSに原因があるんだろうということは、なんとなく分かるのですが、解決方法がわかりません。

スライドショーのCSSですが、オリジナルは以下です。
position:relative;　が影響し、上下のcontents（menuやheader）に重なってしまうため、各数値を変更しました。

------------------
@charset "utf-8";

/*crossFader*/
.crossfader{
position:relative;
height:340px;
}

.crossfader img{
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0;
cursor:pointer;
}

.crossfader .active{
z-index:10;
opacity:1.0;
}

.crossfader .last-active{
z-index:9;
}

------------------

ソースを見てもらったほうが確実と思いますので、URL記載します。
ほかにも、HTMLの不備などありましたらご指摘下さい。よろしくお願いいたします。

http://miyauchi-babymomcare.com/

shockatz · Accepted Answer

#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

ORUKA1951 · Answer

いまどき、transitinalはないでしょう。

　⇒HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )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">

　これで解決しなかったら、あらためて

IEで表示されてしまう余白をなくしたい

#top内部で、div#header_titleと、div#header_otherが、floatで左右に振られていますが、そのあとにブロックの高さを固定する"clear:both"が入っていません。

いまどき、transitinalはないでしょう。

この回答への補足

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング