ようこそ ゲスト さん、新規登録（無料）して気になる疑問を解決しませんか？
はじめての方へ｜ヘルプ｜FAQ
スポンサーサイト（詳細）

質問
質問者：funny_g リストタグでのナビゲーションボタンで、背景画像が表示されません。
困り度：
  • すぐに回答を！
 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;　　
}
質問投稿日時：08/03/28 23:38
質問番号：3903451
この質問に対する回答は締め切られました。
最新から表示｜回答順に表示

回答

 
回答者：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;
}
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：08/03/29 01:30
回答番号：No.2
この回答への補足ダメみたいです。
なにか他の部分がいけないんでしょうか。。。
この回答へのお礼この回答にお礼をつける(質問者のみ)

回答

 
回答者：Muller3 ちょっとCSSの記述の中に全角スペースなど余計なゴミが入ってないか確認してみて下さい。コピペしたらゴミだらけだったので。
私のsafariでは、ゴミ取ったらできましたよ。
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：08/03/29 01:04
回答番号：No.1
この回答への補足ごめんなさい、ゴミは投稿する際についてしまったもので、
実際のソースにはついていません。

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

う〜ん。。ということは他のところがいけないんですかねぇ？
css以外に考えられる要因って、他にありますでしょうか？？
この回答へのお礼この回答にお礼をつける(質問者のみ)
 
最新から表示｜回答順に表示
スポンサーサイト（詳細）
このページのトップへ