CSSテクニックコミュのIE6で表示がずれる<h1>に<ul><li>ナビゲーションを回り込ませる

はじめまして、マサといいます。
現在、友人に頼まれｻｲﾄ作りをしていますが
表示ずれの件で悩んでいます。

もしよろしければアドバイス等頂けると助かります。
よろしくお願いします。

■質問

H1要素の左側に<ul>と<li>にfloatを使用したナビゲーションを配置しようとしていますが
macのFireFox,Safariでは意図した通りに見えますが
windows(me)のIE6で確認すると表示がずれています。
vistaのIE7ではナビゲーションまでは意図した通りで
その下に配置したメイン画像がIE6と同じ程度右側にずれてしまいます。

意図した通り表示させるには
どこが適していないかご指摘頂けると助かります。
よろしくお願いします。

■添付画像
左から
mac FireFox
windows me IE6（写メですみません、、、）

■制作環境
mac os10.4
dreamweaver MX2004

■html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title>無題</title>
<link href="css/test01.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container800">

<h1>店舗名</h1>

<ul id="menuButton">
<li class="topActive">トップページ</li>
<li class="rental"><a href="pages/ready.html">アウトドアレンタル用品</a></li>
<li class="bland"><a href="pages/ready.html">取り扱いアウトドアブランド</a></li>
<li class="info"><a href="pages/ready.html">インフォ／サーフ情報、イベント情報</a></li>
<li class="mail"><a href="mailto:info@●●.jp">メールでのお問い合わせ</a></li>
</ul>



<div class="mainPhoto"> </div>



</div>
</body>
</html>

■css
h1 {
background-image: url(../images/logo.gif);
background-repeat: no-repeat;
height: 127px;
width:260px;
text-indent: -9999px;
background-position: 0px 59px;
margin: 0px;
padding: 0px;
}
body {
padding:0px;
margin:0px;
}
#container800 {
background-image: url(../images/bg01.gif);
width: 715px;
padding-right: 42px;
padding-left: 43px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
.mainPhoto {
text-indent: -9999px;
background-image: url(../images/photo_main01.jpg);
background-repeat: no-repeat;
height: 254px;
margin: 47px 0px;
padding: 0px;
}
#menuButton {
position: relative;
left: 265px;
top: -127px;
margin: 0px;
padding: 0px;

}
#menuButton li {
float: left;
text-indent: -9999px;
list-style-type: none;
width: 90px;
height:127px;
}
#menuButton a {
display:block;
width: 90px;
height:127px;
}
.topActive {
display: block;
background-image: url(../images/button_menu_01.gif);
background-repeat: no-repeat;
}
.rental a {
display:block;
background-image:url(../images/button_menu_01.gif);
background-repeat:no-repeat;
background-position:-100px 0px;
}
.rental a:hover {
background-image:url(../images/button_menu_01.gif);
background-repeat:no-repeat;
background-position:-500px 0px;
}

.bland a {
display:block;
background-image:url(../images/button_menu_01.gif);
background-repeat:no-repeat;
background-position:-200px 0px;
}
.bland a:hover {
background-image:url(../images/button_menu_01.gif);
background-repeat:no-repeat;
background-position:-500px 0px;
}
.info a {
display:block;
background-image:url(../images/button_menu_01.gif);
background-repeat:no-repeat;
background-position:-300px 0px;
}
.info a:hover {
background-image:url(../images/button_menu_01.gif);
background-repeat:no-repeat;
background-position:-500px -254px;
}
.mail a {
display:block;
background-image:url(../images/button_menu_01.gif);
background-repeat:no-repeat;
background-position:-400px 0px;
}
.mail a:hover {
background-image:url(../images/button_menu_01.gif);
background-repeat:no-repeat;
background-position:-400px -127px;
}

よろしくお願いします！

コメント(4)

最初
全て
最新の40件

[1] mixiユーザー 02月28日 20:48

すみません掲載漏れと訂正があります。

http://www.aquaflowcreation.net/test/index_test.html
でテスト画面が開けます。

それと
誤）H1要素の左側に<ul>と<li>にfloatを使用したナビゲーションを配置しようとしていますが
正）H1要素の右側に<ul>と<li>にfloatを使用したナビゲーションを配置しようとしていますが

です。すみません。よろしくお願いします。

[2] mixiユーザー 02月28日 21:34

さらにすみません、解決しそうです。
見直しをしたらh1にfloat:leftがかかっていませんでした。
ほぼ半日悩んでいたのに、ケアレスミスでした。

考えていただいた方、貴重なお時間すみませんでした。
ありがとうございます。

[3] mixiユーザー 02月28日 21:54

#menuButton li {
zoom: 1;
}

あたりを追加すればOKだと思います。

ダメな時は、その周辺の要素に、「zoom: 1;」の指定をしてみてください。

[4] mixiユーザー 02月28日 23:18

コバさん、ありがとうございます！
zoom初めて知りました。

ログインすると、みんなのコメントがもっと見れるよ