safariでの横並びリスト（List）CSSずれについて

質問

CSSマスターの方にご質問させていただきます。

現在横並びリストを制作しようとしております。

リストに表示する文字の高さを中央揃えにし、カーソルが触れるまでは黒色画像、hover時に赤色画像のバックグラウンドをマイナス設定にてロールオーバー効果を演出しようとしています。

IEではきちんと表示されているのですがsafariではパディング分、赤色がズレてしまい、hover時には黒色がズレてしまいます。

<UL id="sitemenu">
<LI id="side">あいうえお
<LI id="side">かきくけこ
</UL>

/***********LI設定***********/

#side A{
width:60px;　//幅
height:40px;　//高さ
margin-top : 0px;
margin-left : 0px;
margin-right : 0px;
margin-bottom : 0px;
background-image : url(背景.gif);　//背景
background-position : 0px 0px;
no-repeat; text-align : center; //文字の位置
text-decoration : none;　//文字飾り
vertical-align : top;　//文字の高さ
padding-top : 10px;　//パディング高さ
float : left;
}

#side A:hover{
background-position : 0px -40px; no-repeat;
}

/***********UL設定***********/

#sitemenu{

padding-top : 0px;
padding-left : 0px;
padding-right : 0px;
padding-bottom : 0px;
margin-top : 0px;
margin-left : 0px;
margin-right : 0px;
margin-bottom : 0px;
border-width : 0px 0px 0px 0px;
vertical-align : top;
text-align : left;
list-style-type : none;
float : left;

}
#sitemenu LI{
float : left;
}

なんとか背景画像がずれない様に表示させていので、どなたかわかる方がいらっしゃいましたら大変申し訳ないのですがご教授お願いいたします。

回答No.5

abril · ベストアンサー

すみません、ANo.4を途中で投稿してしまいました。先程のサンプルの考え方と、現状の問題点をざっとまとめてみました。
【問題点】
・定義の順番としては、親要素から子要素・共通部分から個別部分、がベーシックな考え方だと思いますので、#sitemenu→#sitemenu LI→#sitemenu A→#sitemenu A:hover→#b01 A～#b111 A、という順番が（定義の重複を避ける為にも）妥当でしょう。
・#sitemenuの定義の、borderは初期値が0の為不要／vertical-alignは無効（この要素には適用されません）の為不要／floatはレイアウト上意味がない為不要。
・"text:none;"という「？」な定義がありましたが、"text"というプロパティはありません。

【サンプルの考え方】
#sitemenu {
height: 40px;←親要素<ul>の高さを決め打ち
overflow: hidden;←上記の高さをはみ出した内容は非表示に
（省略）
}
→ここで"overflow: hidden;"を定義しておくことで、height: 40px;に対して後に定義される#sitemenu Aの"padding-top: 10px;"分の差が下にはみ出してしまっても隠してしまえます。
#sitemenu LI {
（省略）
float: left;←横並びに
height: 40px;←floatで高さが失われているので明示
text-align: center;←テキストの水平方向センタリングはここで一括定義
margin: 0;←マージンを初期化（念の為。既出の定義で<li>のマージンが初期化されている様なら不要です）
}
#sitemenu A {
display: block;←ブロック要素化することで高さを取得
height: 100%;←親要素の40pxに対する高さを取得
background: url(../parts/bottom/botomm_BG.gif) 0 0 repeat-x;←共通部分を一括定義
font-size: 14px;←（同上）
color: white;←（同上）
text-decoration: none;←（同上）
padding-top: 10px;←（同上）
}
→background-repeatの値をno-repeatではなくrepeat-xとしておかないと、画像の幅が100pxに対し、メニューの#b05の幅が116pxと超えてしまっているので右に空白ができてしまいます。
#b01 A {
width: 60px;
}
から
#b11 A {
width: 93px;
}
→id毎にユニークなスタイルは幅だけなので、個別定義部分はこれだけで済みます。

何かイメージ通りにならないところがありましたら補足して下さい。
（分割投稿になってしまった事をお許し下さい）

お礼

abril様
ありがとうございます。見事にピタリと揃いました！
親要素、子要素を把握して設定しないといけないんですね。
本当に助かりました！誠にありがとうございます。

回答No.4

abril

実際の（現在の）ソースを元に検証しました。実際の（現在の）ソースにはFirefox、Opera等でやはり不具合があります（heightとpadding-topの解釈の違い等）。その差を吸収するサンプルです。ブラウザ振り分けをする事なく、IE6.0/7.0、Firefox2.0～、Opera9.25 on Windows XP、Safari3.0 on Mac OSXで表示結果をほぼ同じにできました。
----------------------------------------------------------------------
【HTML】
----------------------------------------------------------------------
（省略）
<UL id="sitemenu">
<LI id="b01"><A href="index.html">トップ</A></LI>
<LI id="b02"><A href="index.html">トップ</A></LI>
<LI id="b03"><A href="index.html">トップ</A></LI>
<LI id="b04"><A href="index.html">トップ</A></LI>
<LI id="b05"><A href="index.html">トップ</A></LI>
<LI id="b06"><A href="index.html">トップ</A></LI>
<LI id="b07"><A href="index.html">トップ</A></LI>
<LI id="b08"><A href="index.html">トップ</A></LI>
<LI id="b09"><A href="index.html">トップ</A></LI>
<LI id="b10"><A href="index.html">トップ</A></LI>
<LI id="b11"><A href="index.html">トップ</A></LI>
</UL>
（省略）
----------------------------------------------------------------------
【CSS】
----------------------------------------------------------------------
（省略）
/* ---リスト設定---*/
#sitemenu {
height: 40px;
overflow: hidden;
list-style-type: none;
padding: 0;
margin: 0;
}
#sitemenu LI {
float: left;
height: 40px;
text-align: center;
margin: 0;
}
/* ---ボタン設定開始---*/
#sitemenu A {
display: block;
height: 100%;
background: url(../parts/bottom/botomm_BG.gif) 0 0 repeat-x;
font-size: 14px;
color: white;
text-decoration: none;
padding-top: 10px;
}
#sitemenu A:hover {
background-position : 0px -40px;
}
#b01 A {
width: 60px;
}
#b02 A {
width: 68px;
}
#b03 A {
width: 68px;
}
#b04 A {
width: 70px;
}
#b05 A {
width: 116px;
}
#b06 A {
width: 65px;
}
#b07 A {
width: 83px;
}
#b08 A {
width: 66px;
}
#b09 A {
width: 77px;
}
#b10 A {
width: 54px;
}
#b11 A {
width: 93px;
}
/* ---ボタン設定終了 ---*/
（省略）
----------------------------------------------------------------------

回答No.3

abril

本件の直接の回答ではないのですが、端から見ていてちょっと気になりましたので。

http://www.geocities.jp/axi_wakayama/2008/0506/index.html

上記は、ANo.1-2の回答者様のアドバイスを得て改良された現時点での最終形なのでしょうか？

主要モダン・ブラウザの1つであるFirefoxで見ると、#sitemenuのリストが横並びにすらなっていませんが、これは全く問題にはされていないのでしょうか？
現状のCSSもまだ意味不明の定義が残っている様ですが…
※なお、閉じタグのあるもの（<li>））はできるだけ省略されない方がベターです。XHTMLへの以降の際などには手間が増えます。

お礼

abril様
ありがとうございます。仮アップでしたのでFｆではレイアウトずれていたみたいですね。申し訳ありません。
只今回答いただいたCSSに変更いたしました。

参考アドレスはこちらから
http://www.geocities.jp/axi_wakayama/2008/0506/index.html

補足

htmlに
<LINK rel="stylesheet" href="safari用スタイル" type="text/css">
<!--[if gte IE 5]><LINK rel="stylesheet" href="IE用スタイル" type="text/css"><![endif]-->

上記を記述するとほぼcssは振り分けられるみたいですね。
ただしこの方法だと一行ですがhtmlの記述が増え、cssも複数増えそうです。

私は普段

A.html
　└A専用css
　　└レイアウトcss
と@import urlを使い付加を減らしています。
『<!--[if gte IE 5]><![endif]-->』この記述をhtml内では無く外部css内で記述する方法はないでしょうか？

本題とは少し変わってきましたが、ひとつのcssで全てのブラウザに対応するのが無理なのかもしれませんね。

ご存知の方がいらっしゃいましたらお手数ですがご教授ください。

回答No.2

kuzumiHK

padding-top10px分があるので、
画像が40pxで変わるのであれば、
heightが30pxかもしれないです。

お礼

kuzumiHK様
再度ありがとうございます。
ご指定の通り一度やってみたのですが、safariならばばっちりズレずに揃うのですがIEだと10px分高さが足りなくなってしまうのです（；-；）
safariの時だけsafari専用cssを読み込ませるように出来れば、解決できそうですね。確かそのやり方があったような気がしますが・・・

参考アドレスはこちらから
http://www.geocities.jp/axi_wakayama/2008/0506/index.html

回答No.1

kuzumiHK

Safariの環境で確認できていませんが、
スタイルの設定が複雑になりすぎているようなので、
単純化して、こんな感じではいかがでしょうか。

#sitemenu{
padding : 0;
margin : 0;
list-style-type : none;
}

#sitemenu LI{
padding : 0;
margin : 0;
display : inline;
float : left;
}

#side A{
display : block;
width:60px; //幅
height:40px; //高さ
margin : 0;
background-image : url(背景.gif);　//背景
background-position : 0px 0px;
no-repeat; text-align : center; //文字の位置
text-decoration : none;　//文字飾り
padding : 10px;　//パディング高さ
}

#side A:hover{
background-position : 0 -40px;
}

<UL id="sitemenu">
<LI id="side"><A>あいうえお</A></LI>
<LI id="side"><A>かきくけこ</A></LI>
</UL>

※<LI>のなかに<A>タグがあることが前提です。

また、もし背景が単色でしたら、background部分は単純に、
AとA:hoverに違う背景色を入れるだけで済みそうです。

お礼

kuzumiHK様
CSSの省略化ができました。ありがとうございます。

引き続き解決策を募集しております。
テスト段階の物をアップしてみましたのでこちらを見ていただければと思います。

http://www.geocities.jp/axi_wakayama/2008/0506/index.html