CSSで横並びのメニューを作っているのですが、背景はそのまま表示され、a:hover時の画像がFirfoxだとずれてしまい、IEだと正しく表示されます。
以下、CSSですが、どこがいけないのでしょうか?
ご教授お願いします。
#gnavi {
width: 600px;
margin: 0;
padding: 0;
}
#gnavi ul,
#gnavi ul li {
float: left;
list-style-type: none;
}
#gnavi ul {
width: 600px;
height: 80px;
background: url(./img/gnavi/g_navi.jpg) no-repeat;
}
#gnavi ul li a {
display: block;
width: 120px;
height: 80px;
text-indent: -9999px;
font-size: 0;
line-height: 0;
}
#gnavi ul li.gn01 a.active,
#gnavi ul li.gn01 a:focus,
#gnavi ul li.gn01 a:hover {
background: url(./img/gnavi/g_navi.jpg);
background-repeat: no-repeat;
background-position: left bottom;
}
#gnavi ul li.gn02 a.active,
#gnavi ul li.gn02 a:focus,
#gnavi ul li.gn02 a:hover {
background: url(./img/gnavi/g_navi.jpg);
background-repeat:no-repeat;
background-position: -120px -80px;
}
#gnavi ul li.gn03 a.active,
#gnavi ul li.gn03 a:focus,
#gnavi ul li.gn03 a:hover {
background: url(./img/gnavi/g_navi.jpg);
background-repeat:no-repeat;
background-position: -240px -80px;
}
#gnavi ul li.gn04 a.active,
#gnavi ul li.gn04 a:focus,
#gnavi ul li.gn04 a:hover {
background: url(./img/gnavi/g_navi.jpg);
background-repeat:no-repeat;
background-position: -360px -80px;
}
#gnavi ul li.gn05 a.active,
#gnavi ul li.gn05 a:focus,
#gnavi ul li.gn05 a:hover {
background: url(./img/gnavi/g_navi.jpg);
background-repeat:no-repeat;
background-position: -480px -80px;
}
※メニューはw:600px h:160pxの画像にて背景を利用し各メニュー部分をスライドさせて表示をしようと考えております。
※各メニューの大きさはw:120px h:80pxです。
以下、HTMLへのタグです。
<div id="gnavi">
<ul>
<li class="gn01"><a href="#container" title="トップページ" class="active">トップページ</a></li>
<li class="gn02"><a href="#container" title="サービス内容">サービス内容</a></li>
<li class="gn03"><a href="#container" title="納品までの流れ">納品までの流れ</a></li>
<li class="gn04"><a href="#container" title="会社概要">会社概要</a></li>
<li class="gn05"><a href="#container" title="お問合せ">お問合せ</a></li>
</ul>
</div>
色々と試してはいるのですが、どうも表示が上手く行かず、もしかしたら自分で解決をしようと試み、初心?基本的なことを忘れて入るのではと思い、皆さんに構文を見て頂きご指摘を頂ければ幸いです。
どうぞ、宜しくお願いします。
No.1ベストアンサー
- 回答日時:
ulのマージンとパディングが、
0クリアされていないためかもしれません。
#gnavi ul {
width: 600px;
height: 80px;
background: url(./img/gnavi/g_navi.jpg) no-repeat;
margin: 0;
padding: 0;
}
早速試してみたところ、上手く表示されました。
基本的な事でした(汗)
とっても助かりました感謝しております。
ありがとう御座いました。
また、分からない事があり機会がありましたら宜しくお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS htmltとcssの連携をして画像縮小について 1 2022/11/15 20:32
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
中点「・」の改行について
-
widthやheightの数値に単位(px...
-
【CSS】ヘッダーの高さが不明の...
-
表示倍率を変えるとレイアウト...
-
css初心者 フレックスボックス...
-
テキストボックスの高さを可変...
-
HTMLのiframeの入れ子について
-
定義リストに下線をつけたいと...
-
投稿フォームの整列
-
div領域をウインドウサイズに合...
-
Firefoxで見るとli要素レイアウ...
-
画像の位置指定
-
Firefoxでheight:100%がきかない?
-
回り込みについて(間隔が空く)
-
初心者html・CSS ウィンドウを...
-
divで囲まれたpaddingの指定を...
-
CSSで背景色を下まで表示させたい
-
CSSでテキストインデントをマイ...
-
入力フォームとセレクトボック...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
css初心者 フレックスボックス...
-
form input テキストを上下中央...
-
<div>と<div>の間の10px程の...
-
CSSがなぜかfont-sizeだけ効か...
-
divで囲まれたpaddingの指定を...
-
表示倍率を変えるとレイアウト...
-
画像イメージの上下左右、欲し...
-
CSS、width100%でもできる余白
-
cssで中央寄せ
-
CSS:animation開始位置の設定
-
スクロールボックスを中央に配...
-
CSSで背景画像を一番下にもって...
-
【CSS】ヘッダーの高さが不明の...
-
初心者html・CSS ウィンドウを...
-
footer を横幅いっぱいに広げる...
-
CSSで指定した背景画像にリンク...
-
div領域をウインドウサイズに合...
-
W3Cのソースコードの検証サービ...
おすすめ情報