こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

IE6とその他のブラウザでセンターの位置が【微妙】にずれる・・・

XHTML+CSSで作ったのですが、ブラウザのチェックをしたところIE6だけ一部右寄りになってしまいます。
一部というのは、上から「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>

投稿日時 - 2008-08-29 07:52:29

QNo.4287088

すぐに回答ほしいです

質問者が選んだベストアンサー

普通のブラウザはスクロールバーを「描画領域」とはみなしません。
スクロールバーを除いた幅を100%としてモノを配置します。が、IEは
スクロールバー込みで描画領域の幅を考えます。だから、ずれて見え
るんです。

バラバラな幅の積み木を重ねたようなデザインだと目立つので、全体
をキチっとラップして幅を指定してやるのがいいんじゃないですか。

投稿日時 - 2008-08-29 08:51:45

お礼

ありがとうございます。
IEとはIE6だけでしょうか?よくわからないのが、なぜ一部分だけがずれているのか・・・

今回、全体をwrapする場合はwidth100%で指定しても問題ないのでしょうか?
デザイン的にpxなどで指定できないため・・・

質問ばかりでもうわけありません(汗

投稿日時 - 2008-08-29 08:59:03

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(4)

ANo.4

> よくわからないのが、なぜ一部分だけがずれているのか・・・

> headとnavだけ残しても右寄りになっちゃうんですよね。

おそらくul要素の外左余白がうまく消えていないため。
ul要素の幅を100%にするとわかりやすい。


後方互換となっていると、いろいろ面倒なので、標準準拠となるように文書型宣言を変更することを勧める。

World Wide Web Guide !DOCTYPE スイッチ
http://w3g.jp/others/data/doctype_switching

投稿日時 - 2008-09-02 00:52:20

ANo.3

width:100%; を削除してみてください。

投稿日時 - 2008-08-29 18:19:37

ANo.2

IE6で検証しましたが、「IE6だけ一部右寄りになる」ような状態が確認できませんでした。

ただ、少し気になる点がありましたので報告します。

#wrap要素のwidthが880pxに対して
#wrap要素内のpaddingが左右それぞれ10+30=40px
#left要素のwidthが645px
#right要素のwidthが220px
合計すると
40px+645px+220px=905px
・・・と、親要素の幅を超えています。
これが原因ではないでしょうか?

投稿日時 - 2008-08-29 11:10:22

お礼

>IE6で検証しましたが、「IE6だけ一部右寄りになる」ような状態が確認できませんでした。

本当ですか!?
私の場合、headとnavだけ残しても右寄りになっちゃうんですよね。

wrap部分については今まで、40+880が親要素くらいで考えていたのですが・・・あれ?
色々試してみます。

本当にありがとうございました。

投稿日時 - 2008-08-29 11:38:12

あなたにオススメの質問