CSSテクニックコミュのロールオーバー処理

CSSでのロールオーバーについて質問です。

複数のボタンで構成されるナビゲーションをロールオーバーを含め１枚の画像でリストタグとCSSで作成した場合についてです。

Windows IE6のインターネットオプションの設定で、
「インターネット一時ファイル」「保存しているページの新しいバージョンの確認」の「ページを表示するごとに確認する」にチェックを入れますと、ロールオーバー時に一瞬画像が消え光っているように見えてしまいます。
他の設定や別のブラウザでは問題ないです。
上記の設定でスムーズに表示させる方法はないでしょうか？

■HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>test</title>
<link href="common.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>
<div id="naviA">
<ul>
<li id="side01"><a href="#">総合TOP</a></li>
<li id="side02"><a href="#">会員募集</a></li>
<li id="side03"><a href="#">サービス紹介</a></li>
<li id="side04"><a href="#">ご利用方法</a></li>
<li id="side05"><a href="#">よくあるご質問</a></li>
<li id="side06"><a href="#">お問い合わせ</a></li>
</ul>
</div>
</body>
</html>

■CSS
#naviA ul{
padding:0px;
margin:0px;
list-style:none;
}
#naviA li{text-indent:-9999px;}
#naviA li, #naviA a{
display:block;
width:152px;
height:45px;
}
#naviA a{
text-decoration:none;
background:url(sidenavi_out.jpg) no-repeat;
}
#side02 a{background-position:0 -45px;}
#side03 a{background-position:0 -90px;}
#side04 a{background-position:0 -135px;}
#side05 a{background-position:0 -180px;}
#side06 a{background-position:0 -225px;}
#side01 a:hover{background-position:-152px 0px;}
#side02 a:hover{background-position:-152px -45px;}
#side03 a:hover{background-position:-152px -90px;}
#side04 a:hover{background-position:-152px -135px;}
#side05 a:hover{background-position:-152px -180px;}
#side06 a:hover{background-position:-152px -225px;}

コメント(4)

最初
全て
最新の40件

[1] mixiユーザー 11月17日 20:52

#naviA自体に、background:url(sidenavi_out.jpg)を指定してみたらいかがでしょうか？
検証してないので、うまくいくのか分かりませんが。。。

[2] mixiユーザー 11月17日 21:01

Kazzさんので大丈夫だと思いますが。

それよりも#naviAっているんでしょうか？
ソースを見ている限りだとデザインのためのdivにもなっていないような気がするのですが。ulにidした方がいいと思いますけど。

[3] mixiユーザー 11月18日 11:00

※以下、検証済みではありません

aにbgを敷くのをやめ、liにもともとbgを敷いておき、aにはhover時のみ背景を敷くようにしたらどうでしょう。
そのちらつきはhoverしたときに画像の読み込みがまたはじまっちゃうからだと予測されるので、その下のliにbgを指定しておけばその部分はかんけーないからちらつかないんではないかなーと。

#naviA li,#naviA a:hover{
text-decoration:none;
background:url(sidenavi_out.jpg) no-repeat;
}
#side02{background-position:0 -45px;}
#side03{background-position:0 -90px;}
#side04{background-position:0 -135px;}
#side05{background-position:0 -180px;}
#side06{background-position:0 -225px;}
#side01 a:hover{background-position:-152px 0px;}
#side02 a:hover{background-position:-152px -45px;}
#side03 a:hover{background-position:-152px -90px;}
#side04 a:hover{background-position:-152px -135px;}
#side05 a:hover{background-position:-152px -180px;}
#side06 a:hover{background-position:-152px -225px;}

[4] mixiユーザー 11月18日 20:08

みなさんありがとうございました。
なんとか対処できました＾＾

ログインすると、みんなのコメントがもっと見れるよ