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;
}
お礼
遅くなって申し訳ありません。 回答ありがとうございました。 せっかく答えてくださったのですが私の理解力不足のため出来ませんでした。 結局メニューの囲いは削除し、そのまま下に並べました。 ありがとうございました。