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件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
ちょっとCSSの記述の中に全角スペースなど余計なゴミが入ってないか確認してみて下さい。
コピペしたらゴミだらけだったので。私のsafariでは、ゴミ取ったらできましたよ。
この回答への補足
ごめんなさい、ゴミは投稿する際についてしまったもので、
実際のソースにはついていません。
>私のsafariでは、ゴミ取ったらできましたよ。
う~ん。。ということは他のところがいけないんですかねぇ?
css以外に考えられる要因って、他にありますでしょうか??
No.2
- 回答日時:
これで行けますかね?
■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;
}
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
CSS、width100%でもできる余白
-
cssで「下よせ」ってどうやって...
-
CSS(0の単位)について
-
ページを拡大縮小でborderが消...
-
<div>と<div>の間の10px程の...
-
floatした画像の下揃えについて
-
CSSの角丸での質問です。 今、C...
-
スクロールボックスを中央に配...
-
定義リスト dl dd dt
-
余分な縦スクロールバーが出て...
-
heaerとfooterに背景画像が難し...
-
Flexslider2のカーセルスライダ...
-
CSSでボックスのheightが0になる
-
【スタイルシート?】同行内で...
-
テーブル内の文字が揃わない
-
【CSSについて】リストをフロー...
-
リストを全体的に右寄せにしたい。
-
CSSで余白とパディングに”0”を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
表示倍率を変えるとレイアウト...
-
CSSがなぜかfont-sizeだけ効か...
-
CSS、width100%でもできる余白
-
W3Cのソースコードの検証サービ...
-
CSS:animation開始位置の設定
-
CSSで指定した背景画像にリンク...
-
<div>と<div>の間の10px程の...
-
余分な縦スクロールバーが出て...
-
CSSでボックスのheightが0になる
-
【CSS】ヘッダーの高さが不明の...
-
スクロールボックスを中央に配...
-
li 黒丸含んで移動する方法
-
border-style:solidで文字がずれる
-
【HTML&CSS】フッター下部の余...
-
Media Queries 4 で 非推奨とな...
-
初心者html・CSS ウィンドウを...
おすすめ情報