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

解決済

質問者：Catherine-100
質問日時：2012/12/22 13:51
回答数：2件

ブログポータルのテンプレをカスタマイズしたことがあるレベルの私ですが、今回初めて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/

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： shockatz
回答日時：2012/12/23 11:54

#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

- 0
- 件

通報する

この回答へのお礼

ご回答ありがとうございます。

transitinalでも大丈夫ですか＾＾；
ご指摘の通りclear:bothで解除したところ、上の余白が詰まりました！
（下はそのまま・・・。）　

すみません、ちなみにIE7（以前）の現象のようで、IE8以降では、改変前のコードでも大丈夫でした。
とりあえず、これで進めたいと思います。

的確＆明解なご回答に感謝します。

通報する

お礼日時：2012/12/23 22:19

No.1

回答者： ORUKA1951
回答日時：2012/12/22 16:37

いまどき、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">

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