ようこそ ゲスト さん、新規登録（無料）して気になる疑問を解決しませんか？
はじめての方へ｜ヘルプ｜FAQ

質問
質問者：noname#64096 CSSで<ul><li>タグを使ってどのブラウザでも同じように表示させたい。
困り度：
  • すぐに回答を！
 .ul {
width: 120px;
height: auto;
float: left;
font: 12;
line-height: 150%;
padding: 0;
list-style-image: url(img/side-tab.gif);
}
.li {
font-size: 12px;
margin-left: 1.5em;
}

<ul class="○○○">
<li>１１１１１</li>
<li>２２２２２</li>
<li>３３３３３</li>
<li>４４４４４</li>
<li>５５５５５</li>
<li>６６６６６</li>
</ul>

このようなコードでlistの頭には画像を使いたいのですが、どうしてもブラウザごとに表示がばらばらになってしまいます。
横幅は185pxまででおさめて、かつlistの画像とテキストが同じ列に表示されるようにしたいと考えています。
唯一firefoxだけが思うように表示できました。
IE６と７でも違う表示になりました（IE6だとかなり右寄り）
operaに関しては画像とテキストの縦位置がずれてしまっていました。

CSSに関してはいろいろいじってて、なにがなんだがわからない状態になってしまいました・・
これを一つのCSSできれいに表示することは不可能でしょうか？
どうかよろしくお願致します。
質問投稿日時：08/03/30 21:02
質問番号：3908217
この質問に対する回答は締め切られました。
最新から表示｜回答順に表示｜良回答のみ表示

回答

良回答10pt
回答者：abril > どうしてもindentの画像とテキストの縦位置がそろいません・・・orz
> 画像を適正なサイズにしなければいけないのでしょうか？
> 現在は12PXのテキストに10*10pxの画像をindentに使用しています。

上記のみ着目、そこまでの経過は把握していません。また、下記はANo.2の補足での質問者様のCSS設定をベースにした上で改良しています。

----------------------------------------------------------------------
【CSS】
----------------------------------------------------------------------
ul {
float: left;
list-style: none;
font-size: 12px;
line-height: 150%;
padding: 0px;
margin: 0px;
}

ul li {
width: 120px;
background: url(./images/side-tab.gif) 0 3px no-repeat;
padding-left: 20px;
}
----------------------------------------------------------------------
【HTML】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "​http://www.w3.org/TR/html4/strict.dtd">​
文字コードはShift_JISです。
----------------------------------------------------------------------
（省略）
<body>

<ul>
<li>ああああああああああああああああああああ</li>
<li>いいいいいいいいいいいいいいいいいいいい</li>
<li>うううううううううううううううううううう</li>
</ul>

</body>
（省略）
----------------------------------------------------------------------
「indentの画像とテキストの縦位置がそろ」わない様に見えるのは、"line-height: 150%;"に対する広さの解釈が環境によって異なる為ですが、font-sizeが12pxの場合、ちょっと行間が広目かと思われます。行間に応じてテキストの上下にはテキストそのもののサイズ以上の余白が付加されるので、現在の設定だと、テキストの上には大体2,3pxぐらいの余白ができている感じです。試しに<li>の定義に一時的に適当なborderを付け足してみてください（例："border: solid 1px #cccccc;"）。そうすると、ボーダーにテキストがぴったりくっつくのではなく、テキストの上下に余白がある事がわかるとよくわかると思います。しかし、bakcgroundで定義した画像自体は、表示位置がディフォルト（background-position: left(又は0) top（又は0)）のまま特に定義されていない為、各<li>の要素の左上開始位置に背景画像が揃ってしまう（＝ボーダーと同じ位置）ので、結果としてテキストの垂直方向の開始位置とにズレができることになります。

したがって、このズレを埋める為には、line-heightを狭めるか、background-positionの垂直方向の位置を若干下にずらしてやるか、のいずれかの調整をすればよいことになります。上記サンプルでは、background-positionのtopの値を3pxほど下にずらす事で、ほぼテキストの位置と揃う感じにしています。line-heightを狭める場合は、110%ぐらいまで落とさないと揃う様にはならないのですが、行間が狭くなるのでかなり見づらくなります。よって、こちらはあまりお奨めできないですね。

IE6.0/7.0、Firefox2.0〜、Opera9.25 on Windows XP上でほぼ同様の表示結果を得ています。

以下はCSSの定義の書き方のアドバイスです。
※オリジナルの表記が間違っているわけではありません。

・プロパティはなるべく一括でまとめて表記する方がすっきりします（backgroundの箇所、参考にして下さい）。
・font-sizeは<li>の方ではなく、親要素の<ul>の方に定義しておいた方がわかりやすいでしょう。
種類：回答
どんな人：専門家
自信：参考意見
回答日時：08/04/01 18:22
回答番号：No.4
この回答へのお礼この回答にお礼をつける(質問者のみ)

回答

 
回答者：taloo 右寄りになるのはlist-style-positionの影響だと思います。
上下の位置についてはmargin-topとmargin-bottomの影響ではないでしょうか。

> CSSに関してはいろいろいじってて、なにがなんだがわからない状態になってしまいました・・
そういうときは一度全部消して、最初からやり直す方が早いかもしれません。
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：08/03/31 19:26
回答番号：No.3
この回答へのお礼ありがとうございます。

みなさのお力添えでなんとか他のboxなどに影響を与えることなくなんとなくはレイアウトを組むことができたのですが・・・

どうしてもindentの画像とテキストの縦位置がそろいません・・・orz

margin topもbottomもかけていないのですが・・・

画像を適正なサイズにしなければいけないのでしょうか？
現在は12PXのテキストに10*10pxの画像をindentに使用しています。

再度ご覧になられましたら、どうかよろしくお願致します。

回答

良回答20pt
回答者：leap_day こんにちは

<style type="text/css"><!--
ul {
margin:0px;
padding:0px;
line-height: 150%;
}
li {
padding-left:20px;
background-image:url(img/side-tab.gif);
background-repeat:no-repeat;
width:120px;
font-size: 12px;
}
--></style>

<ul>
<li>１１１１１</li>
<li>２２２２２</li>
<li>３３３３３</li>
<li>４４４４４</li>
<li>５５５５５</li>
<li>６６６６６</li>
</ul>

とか？(幅は140px）
画像が切れるようだったらpadding-left,line-height,widthで調整
幅 = padding-left + width
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：08/03/31 01:36
回答番号：No.2
この回答への補足ありがとうございます。
参考いただいたものからいろいろ試してなんとか糸口が見えてきました。
.ul {
float: left;
margin: 0px;
padding: 0px;
line-height: 150%;
list-style: none;
}
.ul li {
width: 120px;
background-image: url(img/side-tab.gif);
background-repeat: no-repeat;
padding-left: 20px;
font-size: 12px;
}

ただ、indentの画像とテキストの縦位置が全然合いませんでした。
paddingで調整するか、画像をテキストのサイズに合わせるか迷っています・・・

ちなみにフォントのサイズによって縦の高さとかって決まっているのでしょうか？
それが決まっていれば・・・

そんなにうまくはいかないような気がしますが・・・
この回答へのお礼ありがとうございます。
早速試させていただいたのですが・・・

だめでした・・・
実はこのコードを2カラムのうちの左側にいれているのですが、右側が崩れてしまいます・・・

難しいです・・・

回答

 
回答者：goldfox ブラウザによってcssの解釈が違うので、難しいです。
一番いいのが、JavaScriptでブラウザごとに違うcssを読み込むことだと思います。

​http://feed.designlinkdatabase.net/feed/outsite_834.aspx​
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：08/03/30 21:36
回答番号：No.1
この回答へのお礼ありがとうございます。

こんな便利なものが！
でもJavascriptと見ただけで、難しそうと構えてしまいます（笑

最後の最強の手段で頭に入れておきます！

本当にありがとうございました。
最新から表示｜回答順に表示｜良回答のみ表示
このページのトップへ