リストタグでのナビゲーションボタンで、背景画像が表示されません。

質問

winIE6では正常に表示されるのですが、
safariだとまったくcssが無視され、横並びにもならない始末です(^_^;)
どなたかご教授お願いいたします。

■html

<div id="header">
<ul id="headerMenu">
<li id="home"><a href="index.html">ホーム</a></li>
<li id="sitemap"><a href="sitemap.html">サイトマップ</a></li>
<li id="recruit"><a href="recruit.html">リクルート</a></li>
<li id="contact"><a href="contact.html">お問合せ</a></li>
</ul>
</div>

■css

#header
{
width:100%;
height:107px;
margin:0px;
padding:0px;
position: relative;
font-size:12px;
background:url("img/top.gif") no-repeat;
}

#headerMenu{
　　list-style-type:none;　　
padding:0px;
margin:6px 0px 0px 532px;
}

#headerMenu li {
　　display:inline;
padding:0;
　　margin:0px;
　　float:left;　　
}

#headerMenu a {
　　display:block;　　
　　text-decoration:none;
　　text-indent:-5000px;　　
　　height:25px;
}

#home {
　　display:block;　　
　　background-image: url("img/topmenu_01.gif");　　
　　background-repeat: no-repeat;　　
　　width:63px;　　
　　background-position:0px 0px;　　
}

#home a:hover {　　
　　background-image: url("img/topmenu_01.gif");　　
　　background-repeat: no-repeat;　　
　　background-position:0px -25px;　
}

#sitemap {
　　background-image: url("img/topmenu_02.gif");　　
　　background-repeat: no-repeat;　　
　　width:90px;　　
　　background-position:0px 0px;　　
}

#sitemap a:hover {　　
　　background-image: url("img/topmenu_02.gif");　　
　　background-repeat: no-repeat;　　
　　background-position:0px -25px;　　
}

#recruit {
　　background-image: url("img/topmenu_04.gif");　　
　　background-repeat: no-repeat;　　
　　width:82px;　　
　　background-position:0px 0px;　　
}

#recruit a:hover {　　
　　background-image: url("img/topmenu_04.gif");　　
　　background-repeat: no-repeat;　　
　　background-position:0px -25px;　　
}

#contact {
　　background-image: url("img/topmenu_05.gif");　　
　　background-repeat: no-repeat;　　
　　width:82px;　　
　　background-position:0px 0px;　　
}

#contact a:hover {　
　　background-image: url("img/topmenu_05.gif");　
　　background-repeat: no-repeat;　　
　　background-position:0px -25px;　　
}

回答No.2

suzuko

これで行けますかね？

■html

<div id="header">
<ul>
<li id="home"><a href="index.html">ホーム</a></li>
<li id="sitemap"><a href="sitemap.html">サイトマップ</a></li>
<li id="recruit"><a href="recruit.html">リクルート</a></li>
<li id="contact"><a href="contact.html">お問合せ</a></li>
</ul>
</div>

■css

#header {
width:100%;
height:107px;
margin:6px 0px 0px 532px;
padding:0px;
position: relative;
font-size:12px;
background-image:url("img/top.gif") ;
background-repeat: no-repeat;
}

#header ul {
list-style-type: none;
list-style-position: inside;
padding: 0px;
border: 0px;
}

#header li {
padding:0px;
margin:0px;
float:left;
}

#header a {
background-repeat: no-repeat;
display:block;
text-decoration:none;
text-indent: -5000px;
height:25px;
background-position: center center;
}

#header a:hover {
background-position: center -25px;
}

#home {
background-image: url("img/topmenu_01.gif");
width:63px;
}

#sitemap {
background-image: url("img/topmenu_02.gif");
width:90px;
}

#recruit {
background-image: url("img/topmenu_04.gif");
width:82px;
}

#contact {
background-image: url("img/topmenu_05.gif");
width:82px;
}

補足

ダメみたいです。
なにか他の部分がいけないんでしょうか。。。

回答No.1

Muller3

ちょっとCSSの記述の中に全角スペースなど余計なゴミが入ってないか確認してみて下さい。コピペしたらゴミだらけだったので。
私のsafariでは、ゴミ取ったらできましたよ。

補足

ごめんなさい、ゴミは投稿する際についてしまったもので、
実際のソースにはついていません。

＞私のsafariでは、ゴミ取ったらできましたよ。

う～ん。。ということは他のところがいけないんですかねぇ？
css以外に考えられる要因って、他にありますでしょうか？？