CSSテクニックコミュのOperaでのリストのバグを直したい

いつも勉強させて頂いております。
リストについての質問です。

リストタグでメニューを作成。
まず余白が出来るので、margin:0pxで対応。
更にIE6では表示がズレる（上寄せになってしまう）
ので、CSSハックで対応。
・・・出来たのですが、Opera8.0のみ、やはり上寄せになるので
こちらもCSSハックで。。。と思ったのですが、うまくいきません。

因みに、こちらを参照しました。
http://www6.plala.or.jp/go_west/nextcss/tip/tech/css_hack.htm

現時点では、以下のように記述しています。

-------------------------------------------------
#tmenu ul {
text-align: center;
margin:0px;
_padding-top: 5px;
height: 25px;
background-color:#C18080;
}

#tmenu li {
background: url("../img/icon_arrow.gif") no-repeat center left;
padding-left: 15px;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
display: inline;
list-style:none;
}

<div id="tmenu">
<ul>
<li><a href="#" class="tmenu">HOME</a><li>
</ul>
</div>
-------------------------------------------------

どなたか解決法がお分かりになる方、お教え下さいませ。

コメント(5)

最初
全て
最新の40件

[1] mixiユーザー 08月05日 05:58

●解決法1
line-height:25pxを追加する。

●解決法2
LI {vertical-align:middle}による対応。（IEのみ？）

少し質問内容を理解できていないかも知れませんが参考になれば。あと→_padding-top: 5px;も一応指摘しておきます。

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

ご返答有り難うございます。

まず、解決法１でやってみたところ、これは特にワークしなかったのですが、
解決法２ではOperaのズレは解消しました。

が、、、今度はIEで見ると余白が出来てしまい、
CSS上の　_padding-top: 5px;
を削除したのですが、ワークしてくれません(>_<)

[3] mixiユーザー 08月05日 12:14

とりココさんの解決法1で直ると思うので、勝手に補足させていただきます。

#tmenu ul {
text-align: center;
margin: 0;
padding: 0;
height: 25px;
background-color:#C18080;
}

#tmenu li {
background: url("../img/icon_arrow.gif") no-repeat center left;
padding-left: 15px;
font-size: 12px;
font-weight: bold;
color: #FFFFFF;
display: inline;
list-style:none;
line-height: 25px;
}

これでどうでしょうか？
margin、paddingを0にした状態でheightとline-heightの値を同じにしています。
line-heightはul、liどちらに書いても大丈夫です。
IE6、Firefox、Operaでほぼ同じように表示されると思うのですが、どうでしょうか。

[4] mixiユーザー 08月05日 13:47

ご回答頂き有り難うございます。

とりココさんの、line-height:25pxをliの方に再設定し、
Operaで解決、更にNovuさんのmarginとpaddingを0にし、
IEでのズレはCSSハックで解消できました！

助かりました。どうも有り難うございます！

[5] mixiユーザー 08月05日 14:19

>まみぃさん
連絡もらってたのに、
すぐに対応できなくてすまそ。（；´д｀）

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