みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

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

解決済みの質問

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 Pゴシック", "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;
}

投稿日時 - 2011-09-24 16:14:48

QNo.7031538

すぐに回答ほしいです

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

<!--[if lte IE 6]>IE6用のcssを書く<![endif]-->
あるいは、適当な場所へ入れとく。
<!--[if lte IE 6]>IE6では表示が乱れる可能性があります。<![endif]-->
夫々、IE6の時だけ有効になります。
でも、IE6は無視してもいいのでは、IE9でHTML5にそろそろ移行しても面白いです。

投稿日時 - 2011-09-24 16:58:25

お礼

お礼が遅くなり、大変失礼致しました。
ブラウザチェックをしながらCSSで微調整していくしか方法がないのですね。
なんとか、がんばってみます!
ご回答、ありがとうございました。

投稿日時 - 2011-10-01 01:14:00

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

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

回答(2)

ANo.1

ソースの内容は兎も角『IE6』での動作検証はしない方が最良。
最低でもIE7を使用して下さい。

*IE6とIE7の間には越えられない壁が有ります。

投稿日時 - 2011-09-24 16:29:12

お礼

ご回答ありがとうございます。
IE8、FireFox、Safariでは正常に見ることができるのですが、
どうしても今回のこの問題を解決したく、何とかできないものかと
検討中なのです。JavaScriptを導入してサイト作りをすれば、このような悩みは少し解消するのでしょうけれど、、、。

投稿日時 - 2011-09-24 16:44:30

あなたにオススメの質問