CSSテクニックコミュのWin IEでのナビゲーションのロールオーバーに関して

２度目の質問になります。
ご教授いただければ幸いです。

現在ナビゲーションバーの作成を作成しているのですが、どうしてもwinのIEでうまく動きません。

修正したい点としては、現在テキスト部分にマウスを持って行くとオーバー状態になるのですが、それをテキスト以外にもそのボタン上でロールオーバーするようにしたいのです。

一応CSSにて display: block;の指定をli aに定義していますがWin IE6.0でうまく動作しません。（テキスト部分のみアクティブになります。）

よろしくお願いします。
以下ソースです。
---------------------------
HTML
<div id="other_background">
<ul>
<li>
<p><a href="a.html">リンクＡ</a></p>
</li>
<li class="contents_background">
<p><a href="b.html"><strong>リンクＢ</strong></a></p>
</li>
</ul>
</div>

------------------------------------
css
#other_background ul{
padding:0;
margin:0;
list-style:none;
}
#other_background li{
background:url("../img/contents_off.gif") #EEEEEE no-repeat;
font-size:10px;
padding:0;
border-bottom:1px solid #333333;
line-height:130%;
}

#other_background p a{
color:#515050;
padding:5px 0px 5px 22px;
display:block;
text-decoration:none;
}
#other_background p a:hover{
color:#2F78FC;
padding:5px 0px 5px 22px;
background:url("../img/over_contents.gif") #333333 no-repeat;
text-decoration:none;
}

/*基本ページナビゲーション　現在地指定*/
#other_background .contents_background{
color:#515050;
background:url("../img/over_contents.gif") #333333 no-repeat;
font-size:10px;
border-bottom:1px solid #333333;
line-height:130%;
}
/*リンク設定*/
#other_background .contents_background a{
color:#515050;
text-decoration:none;
display:block;
}

コメント(6)

最初
全て
最新の40件

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

#other_background p a にも height 指定してみてらどうでしょう？

[2] mixiユーザー 11月18日 05:05

<li>
<p><a href="a.html">リンクＡ</a></p>
</li>

pタグに必ずつくマージン部分じゃないでしょうか。
どうしても<li></li>の中で囲まないといけないならば、divにしたらいかがでしょう。

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

WinIEではa要素を display:block; としたとき、リンク領域だけが親ボックスの幅いっぱいにならないことがあります。

a要素にwidthを指定してみてはいかがでしょうか。また僕もp要素はなくても良いと思います。「段落」という感じでもなさそうですし。

テキストと上下の間隔はpaddingで指定されていてフォントサイズ拡大にも耐えられそうですので、heightの指定はなくて大丈夫だと思います。

[4] mixiユーザー 11月18日 12:07

皆様＞

ありがとうございました。無事解決いたしました。

ただ問題が・・・。winIE5.0での確認ができませんでした。

どうしてもpadding指定で左を空間空けている関係でwidthを指定するとずれてしまうのです。

これはWinIE5.0のバグでしょうか？

[5] mixiユーザー 11月19日 06:46

それはIEのWIDTHと余白の計算の違い、ですかね？
ハックで逃げるか、
あるいはwidthとpaddingを別で指定するか、で
回避はできないでしょうか。
widthはul、paddingはliという風に。

私の感覚的な経験上、ですが、CSSでうまくいかないときには、つけたしてマークアップするより、最小限まで削ったほうがうまくいきます。

[6] mixiユーザー 11月19日 12:57

今回の場合、リンク領域をテキストの周囲の余白部分も含めたいという目論見がありそうですから、li要素にpaddingをつけてしまうのはちょっと勿体無いかもしません。

ナビゲーションは固定幅でしょうか。
固定幅であればやっぱりボックスモデルハックが一番早いと思います。

可変幅ですと、それも難しくなります。左右に付けたpaddingの値とwidthの値の両方をパーセンテージで指定する必要がでてくるからです。

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