- ベストアンサー
XHTML+CSSにおいてIE6での原因不明のバグ？に困っています
最近一大決心をし、テーブルでデザインしていたページをCSSでデザインしなおしております。 今IE6にでのみ、おかしな挙動が起こっていて昨日からもう5時間近く直せないでいます。どなたか原因と対処方を教えていただけませんでしょうか？ やりたいこと：枠の中に2段組で左にサイドバー、右にメインの要素を入れようとしています。メインの要素はブログでいうエントリーのように似たような要素が繰り返されます。 事象：IE6でのみエントリーの繰り返しの最後の要素が通常の表示とは別に全体の背景のように表示される。 該当部のソース：一応コメント部もそのまま載せます （XHTML） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-JP" /> <title>あいうえお</title> <style type="text/css"> @import url("xxxxxx.css"); </style> </head> <body> <div id="box"> <div id="centerbox"><!-- 角丸コンテナセンター要素（コンテンツ部） --> <div id="contents"> <!-- ここからコンテンツ ---> <!-- ここからサイドコンテナ --> <div id="side"> <div class="subnavi"> <h2>さいどなび</h2> <p>サイドナビ要素</p> </div><!-- / end of subnavi--> <!-- / サイドコンテナここまで --> </div><!-- / end of side--> <!-- ここからメインコンテナ --> <div id="main"> <h2>コンテンツタイトル</h2> <div class="column"> <h3>コンテンツサブタイトル</h3> <p>コンテンツはここはひふへほ書きくけ子たち</p> <p>コンテンツはここはひふへほ書きくけ子たちつ</p> </div><!-- / end of column--> <div class="column"> <h3>コンテンツサブタイトル２</h3> <p>ここは繰り返しのてすと</p> <p>コンテンツはここはひふへほ書きくけ子たちつて</p> </div><!-- / end of column--> <!-- / ここまでメインコンテナ---> </div><!-- / end of main--> <!-- /ここまでコンテンツ --> </div><!-- / end of contents--> <!-- ここまで角丸コンテナセンター要素 --> </div><!-- end of centerbox --> </div> <!-- / end of box--> </body> （CSS） #box { width: 800px; margin: 0px; padding: 0px; height: auto; clear: both; } #box #centerbox { vertical-align:top; margin: 0px; padding: 0px; clear: both; width: 790px; border-right: 5px solid #990000; border-left: 5px solid #990000; height: auto; border-top-width: 0px; border-bottom-width: 0px; } #contents { margin: 0px 5px 5px; padding: 0px; height: 500px; width: 780px; clear: both; } #contents #side { height: auto; width: 150px; margin: 0px; padding: 0px; float: left; } #contents #side .subnavi { border: thin dotted #00FFFF; margin: 0px; padding: 0px; } #contents #side .subnavi h2 { color: #CC0000; background: #FF66FF; padding: 5px; margin: 0px; font-size: large; } #contents #main { padding: 0px; float: right; height: auto; width: 630px; margin: 0px; } #contents #main h2 { background: #66CCFF; border-left: 10px solid #0000FF; margin: 0px 10px 10px; font-size: x-large; font-weight: bold; padding: 5px 10px; } #contents #main .column { margin: 15px; padding: 10px; border: thin dashed #0000FF; clear: both; } #contents #main .column h3 { background: #99FFFF; border-left: 10px solid #0066FF; margin: 0px; font-size: large; font-weight: bold; padding: 5px; } #contents #main .column p { font-size: medium; clear: both; margin: 5px; padding: 0px; } 縦は一番上から始まり、横は上記HTML<p>サイドナビ要素</p>のサとイの間辺りからcolumn の最後の要素が背景のように出ます。文字は最後の1文字しか見えません。（おそらくその上に他の要素があるため見えないのではないかと思いますが・・・） おそらくCSSに問題があると思うのですが、全く解らないです。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
間違っている個所はないようですよ。 以下のブラウザで確認しましたが、div.column の繰り返しの最後の要素も正常になく表示されました。 ・InternetExplorer 6 ・Opera 9 ・Firefox 1.5 XHTMLの文法チェックもしましたが、XHTML/1.0 StrictクリーンでバッチリOKでしたよ。 見当違いかもしれませんが、以下の２点を再確認されてはどうですか？ ・文字コードは本当に EUC-JP で保存していますか？ →「charset=EUC-JP」と書いていながら、間違って、シフトJISなどで保存していたとか。 ・@import url("xxxxxx.css"); で参照しているスタイルシート内容は、本当に上記の内容ですか？ →ファイル名を勘違いしてて、実は別のファイルを参照していたとか。 あと、ご参考までに、 xml宣言を省略するなら、文字コードは UTF-8 を使用されたほうがよいらしいです。 私もよく分からないのですが、下記のページに説明があります。 http://www.robustdesigns.jp/doc/05help/14create/index.html 私もXHTML+CSSでサイト構築してますが、↑のサイトでDLできるｐｉａｐｉａｃっていうツールを使えばかなり楽ですよ。
その他の回答 (3)
- himajin100000
- ベストアンサー率54% (1660/3060)
IE 6 on WinXP Pro SP2(Virtual PCイメージ，日本語言語パックなしのため豆腐に文字化け) IE 7 on WinXP Pro SP2 Minefield(Firefox 3.0a4pre) on WinXP Pro SP2 Opera v9.20w8769 on WinXP Pro SP2 環境下で ●質問文のソースのコメントの書式が間違っていた("-"が三つある)ので，修正した ●meta要素の文字コード指定変更(EUC-JP→UTF-8 BOM付き)と共にそれを修正した ●html要素の終了タグを追加 ●CSSを別ファイルにせず，style要素に直書き して表示してみたが，特に変化は見られなかった(ちなみにhtml要素を除けば他はきちんと整形式になっていた ==========使ったサンプルソース============== <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>あいうえお</title> <style type="text/css"> #box { width: 800px; margin: 0px; padding: 0px; height: auto; clear: both; } #box #centerbox { vertical-align:top; margin: 0px; padding: 0px; clear: both; width: 790px; border-right: 5px solid #990000; border-left: 5px solid #990000; height: auto; border-top-width: 0px; border-bottom-width: 0px; } #contents { margin: 0px 5px 5px; padding: 0px; height: 500px; width: 780px; clear: both; } #contents #side { height: auto; width: 150px; margin: 0px; padding: 0px; float: left; } #contents #side .subnavi { border: thin dotted #00FFFF; margin: 0px; padding: 0px; } #contents #side .subnavi h2 { color: #CC0000; background: #FF66FF; padding: 5px; margin: 0px; font-size: large; } #contents #main { padding: 0px; float: right; height: auto; width: 630px; margin: 0px; } #contents #main h2 { background: #66CCFF; border-left: 10px solid #0000FF; margin: 0px 10px 10px; font-size: x-large; font-weight: bold; padding: 5px 10px; } #contents #main .column { margin: 15px; padding: 10px; border: thin dashed #0000FF; clear: both; } #contents #main .column h3 { background: #99FFFF; border-left: 10px solid #0066FF; margin: 0px; font-size: large; font-weight: bold; padding: 5px; } #contents #main .column p { font-size: medium; clear: both; margin: 5px; padding: 0px; } </style> </head> <body> <div id="box"> <div id="centerbox"><!-- 角丸コンテナセンター要素（コンテンツ部） --> <div id="contents"> <!-- ここからコンテンツ --> <!-- ここからサイドコンテナ --> <div id="side"> <div class="subnavi"> <h2>さいどなび</h2> <p>サイドナビ要素</p> </div><!-- / end of subnavi--> <!-- / サイドコンテナここまで --> </div><!-- / end of side--> <!-- ここからメインコンテナ --> <div id="main"> <h2>コンテンツタイトル</h2> <div class="column"> <h3>コンテンツサブタイトル</h3> <p>コンテンツはここはひふへほ書きくけ子たち</p> <p>コンテンツはここはひふへほ書きくけ子たちつ</p> </div><!-- / end of column--> <div class="column"> <h3>コンテンツサブタイトル２</h3> <p>ここは繰り返しのてすと</p> <p>コンテンツはここはひふへほ書きくけ子たちつて</p> </div><!-- / end of column--> <!-- / ここまでメインコンテナ--> </div><!-- / end of main--> <!-- /ここまでコンテンツ --> </div><!-- / end of contents--> <!-- ここまで角丸コンテナセンター要素 --> </div><!-- end of centerbox --> </div> <!-- / end of box--> </body> </html>
cssの#contents がfloat: left;だったのがclear: both;になったりfloat: right;になったりとしているのが気になりました。
全部は見てないけど気になった事 divタグが ちゃんと対応してないように見える
お礼
ありがとうございます。 対応していないとは、classやidのつけ方とか、cssの表記とかでしょうか？ cssでデザインするのは不慣れなためよくわかりません。 申し訳ありませんが、もう少し詳しく教えていただけませんでしょうか？
お礼
まとめてお礼をいたします。 皆さん大変ありがとうございます。 皆様にご指摘していただいた点は文字コード以外は確認対応いたしました。 また、この質問に載せた部分以外のCSSと上記のCSSを分離してみたところ、問題は解決いたしました。 どうやら、この質問のままだと再現できなかったようで、CSSの他の要素が原因だったようです。原因はわからなかったのですが、皆さんありがとうございました。 UTF-8化についてはこのサイトはPHPを使っているため、今回は一応見送ります。ただ、UTF-8のほうがよいということは知らなかったのでこの後の参考になりました。 ありがとうございます。