※ ChatGPTを利用し、要約された質問です（原文：IE以外のブラウザーで）
IE以外のブラウザーでホームページ作成時のheader menu画像の表示に問題が発生
はじめまして。
ホームページの作成をDW5.5で行っています。
以下のソース、cssにてアップしたところ、header menuの部分の画像が
IEだとちゃんと横並びに表示されるのですが、Firefox、Safariなどでは
menuが縦に並んでしまいます。
どのように修正すればいいのか、ご指導いただけませんでしょうか？
＜＜ソース部＞＞
<body>
<div id="header"></div>
<div id="head_navi">
<ul>
<li id="head_bu1"><a href="../index.html"></a></li>
<li id="head_bu2"><a href="../about.html"></a></li>
<li id="head_bu3"><a href="#"></a></li>
<li id="head_bu4"><a href="#"></a></li>
<li id="head_bu5"><a href="#"></a></li>
<li id="head_bu6"><a href="../policy.html"></a></li>
<li id="head_bu7"><a href="#"></a></li>
<li id="head_bu8"><a href="#"></a></li>
</ul></div>
</body>
＜＜css部＞＞
*{
margin:0px;
padding:0px;
}
img{
border:none;
}
li{
list-style-type:none;
}
body{
font-size:12px;
line-height:1.4em;
font-family:"ＭＳ Ｐゴシック", "MS PGothic", "メイリオ", Meiryo, Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
background-color: #333333;
margin:0px auto;
}
/* FireFox リンク選択時の点線を消す */
a{
overflow:hidden;
outline:none;
}
/* FireFox flashの境界の点線を消す */
object{
outline:none;
}
/* ■ヘッダー */
#header{
width:1000px;
height:320px;
background-color: #000000;
}
#head_navi{
width:1000px;
height: 40px;
background-color: #666;
}
#head_navi ul{
overflow:hidden;
float:left;
padding-left: 21px;
}
#head_bu1 a{
display:block;
width:112px;
height:38px;
float: left;
background:url(../img/header_1_off.png) no-repeat left top;
}
#head_bu1 a:hover{
background:url(../img/header_1_on.png) no-repeat left top;
}
#head_bu2 a{
display:block;
width:113px;
height:38px;
float: left;
background:url(../img/header_2_off.png) no-repeat left top;
}
#head_bu2 a:hover{
background:url(../img/header_2_on.png) no-repeat left top;
}
#head_bu3 a{
display:block;
width:117px;
height:38px;
float: left;
background:url(../img/header_3_off.png) no-repeat left top;
}
#head_bu3 a:hover{
background:url(../img/header_3_on.png) no-repeat left top;
}
#head_bu4 a{
display:block;
width:122px;
height:38px;
float: left;
background:url(../img/header_4_off.png) no-repeat left top;
}
#head_bu4 a:hover{
background:url(../img/header_4_on.png) no-repeat left top;
}
#head_bu5 a{
display:block;
width:101px;
height:38px;
float: left;
background:url(../img/header_5_off.png) no-repeat left top;
}
#head_bu5 a:hover{
background:url(../img/header_5_on.png) no-repeat left top;
}
#head_bu6 a{
display:block;
width:126px;
height:38px;
float: left;
background:url(../img/header_6_off.png) no-repeat left top;
}
#head_bu6 a:hover{
background:url(../img/header_6_on.png) no-repeat left top;
}
#head_bu7 a{
display:block;
width:134px;
height:38px;
float: left;
background:url(../img/header_7_off.png) no-repeat left top;
}
#head_bu7 a:hover{
background:url(../img/header_7_on.png) no-repeat left top;
}
#head_bu8 a{
display:block;
width:133px;
height:38px;
background:url(../img/header_8_off.png) no-repeat left top;
}
#head_bu8 a:hover{
background:url(../img/header_8_on.png) no-repeat left top;
}
