- ベストアンサー
IE6とその他のブラウザでセンターの位置が【微妙】にずれる・・・
XHTML+CSSで作ったのですが、ブラウザのチェックをしたところIE６だけ一部右寄りになってしまいます。 一部というのは、上から「head」「nav」「main」「wrap」としているのですが「nav」と「wrap」部分だけが微妙に右寄り、もしくはその他が微妙に左より？になってしまいます。 センター寄せには基本的に「0px auto」を使用しているので、色々調べたところ、それが原因？と思い、「textalign center」にしてもなぜか少しずれてしまいます。 ためしに、headとnavだけのスリムな状態にしても同じでした。。。 解決方法に心当たりのある方はお願いします。 【CSS】 @charset "shift_jis"; * { line-height: 150%; font-size: 12px; letter-spacing: 1px; } body{ margin:0px; padding:0px; text-align:center; background-repeat: no-repeat; } img { border: none; vertical-align: bottom; } h1 { font-weight: normal; margin: 15px 0 0 50px; } #head{ width:900px; height:69px; background-image: url(img/bg-head.jpg); margin: 0px auto; text-align: left; } #nav { width: 100%; background-image: url(img/bg-nav.jpg); } #nav ul { margin: 0px auto; width: 900px; padding: 0px; list-style: none; height: 31px; } #nav li { float: left; } #main { width: 100%; height: 284px; text-align: center; background-image: url(img/bg-main.jpg); } #wrap{ width:880px; margin:0px auto; text-align:left; padding: 0 10px 0 30px; background-image: url(img/bg-wrap.jpg); background-repeat: repeat-y; } #left{ width:645px; float:left; } #right{ width:220px; float:right; text-align: right; padding: 0px; height: 1200px; background-image: url(img/bg-right.gif); } #foot{ position:relative; width:100%; height:35px; clear:both; background-image: url(img/bg-foot.gif); margin: 0 0 50px 0; } 【html】 <body> <!-- ********* ヘッダー ******** --> <div id="head"> <h1>\\\\\\\\\\\\\\\\\\</h1> </div> <!-- ***** nav ****** --> <div id="nav"> <ul> <li><img src="img/nav_01.jpg" /></li> <li><img src="img/nav_02.jpg" /></li> <li><img src="img/nav_03.jpg" /></li> <li><img src="img/nav_04.jpg" /></li> <li><img src="img/nav_05.jpg" /></li> <li><img src="img/nav_06.jpg" /></li> <li><img src="img/nav_07.jpg" /></li> </ul> </div> <!-- ***** main ****** --> <div id="main"><img src="img/main.jpg" /></div> <div id="wrap"> <!-- ********* 左側 ******** --> <div id="left"> </div> <!-- ********* 右側 ******** --> <div id="right"> </div> <br style="clear:both" /> </div> <!-- ********* フッター ******** --> <div id="foot"> </div> </body>
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
普通のブラウザはスクロールバーを「描画領域」とはみなしません。 スクロールバーを除いた幅を100%としてモノを配置します。が、IEは スクロールバー込みで描画領域の幅を考えます。だから、ずれて見え るんです。 バラバラな幅の積み木を重ねたようなデザインだと目立つので、全体 をキチっとラップして幅を指定してやるのがいいんじゃないですか。
その他の回答 (3)
- key-child
- ベストアンサー率54% (25/46)
> よくわからないのが、なぜ一部分だけがずれているのか・・・ > headとnavだけ残しても右寄りになっちゃうんですよね。 おそらくul要素の外左余白がうまく消えていないため。 ul要素の幅を100%にするとわかりやすい。 後方互換となっていると、いろいろ面倒なので、標準準拠となるように文書型宣言を変更することを勧める。 World Wide Web Guide !DOCTYPE スイッチ http://w3g.jp/others/data/doctype_switching
- outbrave
- ベストアンサー率60% (231/380)
width:100%; を削除してみてください。
- font_color
- ベストアンサー率45% (24/53)
IE6で検証しましたが、「IE６だけ一部右寄りになる」ような状態が確認できませんでした。 ただ、少し気になる点がありましたので報告します。 #wrap要素のwidthが880pxに対して #wrap要素内のpaddingが左右それぞれ10+30=40px #left要素のwidthが645px #right要素のwidthが220px 合計すると 40px+645px+220px=905px ・・・と、親要素の幅を超えています。 これが原因ではないでしょうか？
お礼
＞IE6で検証しましたが、「IE６だけ一部右寄りになる」ような状態が確認できませんでした。 本当ですか！？ 私の場合、headとnavだけ残しても右寄りになっちゃうんですよね。 wrap部分については今まで、40+880が親要素くらいで考えていたのですが・・・あれ？ 色々試してみます。 本当にありがとうございました。
お礼
ありがとうございます。 IEとはIE6だけでしょうか？よくわからないのが、なぜ一部分だけがずれているのか・・・ 今回、全体をwrapする場合はwidth100％で指定しても問題ないのでしょうか？ デザイン的にpxなどで指定できないため・・・ 質問ばかりでもうわけありません(汗