IE6で見るとメニューバーが崩れてしまいます
ホームページを作成したのですが、ページによって上部に設置したメニューバーが見れたり見れなかったりしてしまいます。CSSハックでIE6でもページ自体は何とか見れるようにはなったのですが、何ページかはどういうわけかトップ部分にあるメニューが画像ではなく、文字で現れて正常に見ることができません。どなた様かお詳しい方、教えて頂けませんでしょうか。下記にhtmlとcssを記述します。
〈html〉
<html>
<body>
<div class="headbg"><img src="head_bg1.jpg" alt="" border="0"></div>
<div class="header"><a href="#" border="0">
<div class="rogo">
</div>
</a>
<div id="globalnavi">
<ul>
<li id="menu1"><a href="#">メニュー1</a></li>
<li id="menu2"><a href="#" >メニュー2</a></li>
<li id="menu3"><a href="#">メニュー3</a></li>
<li id="menu4"><a href="#">メニュー4</a></li>
<li id="menu5"><a href="#">メニュー5</a></li>
<li id="menu6"><a href="#">メニュー6</a></li>
</ul>
</div>
<div class="main"></div>
</div>
</body>
</html>
<CSS>
.headbg {
height:400px;
width: 100%;
min-width:900px;
border:0px solid #F00;
position:absolute;
top:66px;
left:0;
overflow:hidden;
background: url(head_bg_bg.jpg);
background-repeat:repeat-x;
}
.rogo {
background-image: url(rogo.jpg);
background-repeat: no-repeat;
height: 160px;
width: 160px;
padding: 0px;
margin-top: 8px;
margin-right: 0px;
margin-bottom: 11px;
margin-left: 33px;
position: relative;
border: 0px solid #000;
clear: both;
float: left;
position:relative;
}
.header {
width: 900px;
height:300px;
padding:0px;
margin-left: auto;
margin-right:auto;
text-align:left;
margin-top:0px;
border:0px solid red;
}
.main {
height:920px;
width: 900px;
min-width:900px;
background-color:#ffffff;
font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
padding: 0px 0px 0px 0px;
margin-left: auto;
margin-right: auto;
text-align: center;
margin-top:65px;
}
#globalnavi {
margin-left:auto;
margin-right:auto;
margin-top:-170px;
text-align:left;
top:0px;
left:0px;
padding:0px;
width:700px;
height:52px;
list-style:none;
overflow:hidden;
border: 0px solid red;
float:right;
clear:both;
}
#globalnavi ul {
list-style-type: none;
margin: 0;
padding: 0;
height: 52px;
overflow: hidden;
}
#globalnavi li {
text-indent: -9999px;
float:left;
width: 116px;
height: 52px;
margin: 0;
padding-right: 0px;
border:0px solid #333;
}
#globalnavi a {
display: block;
position: relative;
width: 100%;
height: 52px;
}
#menu1 a {
background: url(menu1_active.jpg) no-repeat 0 0;
left:0px;
margin-left:0px;
}
#menu2 a {
background: url(menu2.jpg) no-repeat 0 0;
margin-left:0px;
}
#menu3 a {
background: url(menu3.jpg) no-repeat 0 0;
margin-left:0px;
}
#menu4 a {
background: url(menu4.jpg) no-repeat 0 0;
margin-left:0px;
}
#menu5 a {
background: url(menu5.jpg) no-repeat 0 0;
margin-left:15px;
}
#menu6 a {
background: url(menu6.jpg) no-repeat 0 0;
margin-left:15px;
}
お礼
marginでうごくのはわかっていたのですが、marginは使いたくなかったため、IE6でのびてしまうので。paddingでとおもっていたのですが。 他社の知り合いにきいた所、backgroundはpaddingで動かないのをわすれていました。。。。background-position指示で解決しました！