CSSレイアウトで、サイトを作成していたのですが、
最近になってIE6で確認してみると、レイアウトが崩れまくっていました。。。

3カラムレイアウトなのですが、Firefox等他のブラウザではきちんと表示されるので、なぜかIE6だけ縦1列になってしまいます。。

こちらのサイトでもIE6はレイアウトが崩れやすいという情報がたくさんあり、そちらのアドバイスを参考にしながら1日かけてがんばってのですが、できませんでした。もう限界です(涙)

現在のCSSは、

* {
margin:0;
padding:0;
}
.wrapper {
width: 740px;
margin: 0 auto;
}
.header {
width: 740px;
}
.main {
width: 740
px; /* 両端ブロックとコンテンツを囲んでいるクラスです。 */
}
.menu {display: inline;
float: left;
width: 205px;
}
.contents {display: inline;
float: left;
width: 385px;
}
.affiliate {display: inline;
float: left;
width: 150px;
}
.footer {
clear: both;
width: 740px;
}

というような状態です。
どなたかアドバイスいただけますと大変幸いです。

よろしくお願いいたします。

このQ&Aに関連する最新のQ&A

A 回答 (3件)

HTMLのソースが掲載されてないので、そちらのマークアップの方に不適切な箇所があったら検証のしようがありませんが、もしこのCSSが以下のマークアップ(且つ標準準拠モードで)に対して適用されているなら、IE6でも別に崩れずちゃんと3カラムになりますよ(検証済)。



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>サンプル</title>
<link href="css/sample.css" type="text/css" rel="stylesheet" media="all">
</head>

<body>

<!-- wrapper開始 -->
<div class="wrapper">
<!-- header開始 -->
<div class="header">ヘッダー</div>
<!-- header終了 -->
<!-- main開始 -->
<div class="main">
<!-- menu開始 -->
<div class="menu">
<p>メニュー(左)</p>
<p>メニュー(左)</p>
<p>メニュー(左)</p>
</div>
<!-- menu終了 -->
<!-- contents開始 -->
<div class="contents">
<p>コンテンツ(中)</p>
<p>コンテンツ(中)</p>
<p>コンテンツ(中)</p>
<p>コンテンツ(中)</p>
<p>コンテンツ(中)</p>

<hr width="600">
</div>
<!-- contents終了 -->
<!-- affiliate開始 -->
<div class="affiliate">
<p>アフィリエイト(右)</p>
<p>アフィリエイト(右)</p>
</div>
<!-- affiliate終了 -->
</div>
<!-- main終了 -->

<!-- footer開始 -->
<div class="footer">フッター</div>
<!-- footer終了 -->
</div>
<!-- wrapper終了 -->
</body>
</html>

幅の計算も合ってますし、IE6バグ回避用の"display: inline;"も入ってますし、フッターでfloatをクリアしてますし…
これだけを見る限り、問題はない筈なのですが。上記の主要コンテナブロックのclassには他にpaddingやborderなどの値は入っていたりはしないのですよね?

もしかして、それぞれのカラムの子要素の幅が実際の値では親要素の幅をはみ出してしまっているのでは…?とも思ったのですが、例えばmenuのコンテナブロックの幅は205pxですが、例えばその中に設置してあるバナー画像などのサイズが210pxあるとすれば、3カラム全体が740pxの幅に収まり切らなくなる為、カラム落ちが発生します。
また、その画像の幅が仮に205pxぴったりだとしても、例えば左右にマージンを与えていたりすればやはり描画領域が205pxを超える事になり、やはり計算が合わなくなってカラム落ちします。

一度、上記の主要コンテナブロックのみを残して子要素を全て削除してみて下さい。
それでカラム落ちが発生しないなら、犯人は子要素の何れかのマークアップやスタイルの指定に不備がある為、という事になりますので少しづつ子要素を復活させて見て行って、不具合が発生した時点の要素に原因があると絞り込む事ができます。地道ですが、確実な方法です。
    • good
    • 0
この回答へのお礼

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

1からつくりなおすとなぜか知りませんが、できました。
原因はわかりませんが、変なタグが混入していたのかもしれません。

うまくいきましたので、感謝いたします。

お礼日時:2009/05/25 20:38

HTMLのソースが掲載されてないので、そちらのマークアップの方に不適切な箇所があったら検証のしようがありませんが、もしこのCSSが以下のマークアップ(且つ標準準拠モードで)に対して適用されているなら、IE6でも別に崩れずちゃんと3カラムになりますよ(検証済)。



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>サンプル</title>
<link href="css/sample.css" type="text/css" rel="stylesheet" media="all">
</head>

<body>

<!-- wrapper開始 -->
<div class="wrapper">
<!-- header開始 -->
<div class="header">ヘッダー</div>
<!-- header終了 -->
<!-- main開始 -->
<div class="main">
<!-- menu開始 -->
<div class="menu">
<p>メニュー(左)</p>
<p>メニュー(左)</p>
<p>メニュー(左)</p>
</div>
<!-- menu終了 -->
<!-- contents開始 -->
<div class="contents">
<p>コンテンツ(中)</p>
<p>コンテンツ(中)</p>
<p>コンテンツ(中)</p>
<p>コンテンツ(中)</p>
<p>コンテンツ(中)</p>

<hr width="600">
</div>
<!-- contents終了 -->
<!-- affiliate開始 -->
<div class="affiliate">
<p>アフィリエイト(右)</p>
<p>アフィリエイト(右)</p>
</div>
<!-- affiliate終了 -->
</div>
<!-- main終了 -->

<!-- footer開始 -->
<div class="footer">フッター</div>
<!-- footer終了 -->
</div>
<!-- wrapper終了 -->
</body>
</html>

幅の計算も合ってますし、IE6バグ回避用の"display: inline;"も入ってますし、フッターでfloatをクリアしてますし…
これだけを見る限り、問題はない筈なのですが。上記の主要コンテナブロックのclassには他にpaddingやborderなどの値は入っていたりはしないのですよね?

もしかして、それぞれのカラムの子要素の幅が実際の値では親要素の幅をはみ出してしまっているのでは…?とも思ったのですが、例えばmenuのコンテナブロックの幅は205pxですが、例えばその中に設置してあるバナー画像などのサイズが210pxすれば、73カラム全体が740pxの幅に収まり切らなくなる為、カラム落ちが発生します。
また、その画像の幅が仮に205pxぴったりだとしても、例えば左右にマージンを与えていたりすればやはり描画領域が205pxを超える事になり、やはり計算が合わなくなってカラム落ちします。

一度、上記の主要コンテナブロックのみを残して子要素を全て削除してみて下さい。
それでカラム落ちが発生しないなら、犯人は子要素の何れかのマークアップやスタイルの指定に不備がある為、という事になりますので少しづつ子要素を復活させて見て行って、不具合が発生した時点の要素に原因があると絞り込む事ができます。地道ですが、確実な方法です。
    • good
    • 0

IE6の環境は、無いですが。


IE5。5とIE7では、問題なく表示しますが
最初の指定の、2個は不明ですが
<STYLE TYPE="text/css"><!--
.menu {
float: left;
width: 205px;
}
.contents {
float: left;
width: 385px;
}
.affiliate {
float: left;
width: 150px;
}
.footer {
width: 740px;
}
-->
</STYLE></HEAD><BODY><DIV class="footer">
<DIV class="menu">第1章 数多い謎<BR>庄屋<BR>同子<BR>庄屋<BR>組頭</DIV>
<DIV class="contents">1 寛文縁起と延享縁起<BR>次左衛門<BR>太郎左衛門</DIV>
<DIV class="affiliate">寛文縁起─龍爪権現の独白寛文元年<BR> (1661)<BR>享延頃の<BR>(1740年代)</DIV></DIV></BODY></HTML>
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング

おすすめ情報