CSSロールオーバーについて教えて下さい。
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>
色々と試してはいるのですが、どうも表示が上手く行かず、もしかしたら自分で解決をしようと試み、初心？基本的なことを忘れて入るのではと思い、皆さんに構文を見て頂きご指摘を頂ければ幸いです。
どうぞ、宜しくお願いします。
お礼
解りやすい説明ありがとうございます！目からうろこが落ちました。 「backgroundってのは、background-color、background-image、 background-repeat、background-attachment、background-position の5つのプロパティを一度に簡略的に指定するものです。」 なるほど！！ ありがとうございました。