プロが教えるわが家の防犯対策術!

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;  
}

A 回答 (2件)

ちょっとCSSの記述の中に全角スペースなど余計なゴミが入ってないか確認してみて下さい。

コピペしたらゴミだらけだったので。
私のsafariでは、ゴミ取ったらできましたよ。

この回答への補足

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

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

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

補足日時:2008/03/31 10:51
    • good
    • 0

これで行けますかね?



■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;
}

この回答への補足

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

補足日時:2008/03/31 10:42
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!