CSSを使ってのLIST表示

締切済

質問者：mintroyale
質問日時：2007/07/26 16:49
回答数：2件

CSSを使ってLIST表示を以下のようにしているのですが、

ul.ref {
margin: 0 20px;
padding: 0;
}

.ref li {
margin: 0 0 5px 0;
padding: 2px 0 2px 20px;
list-style-type: none;
font-weight: bold;
color: #03C;
background: #DDD url(../img/arrow.gif) no-repeat;
background-position: 0.5% 55%;
}

IEとFirefoxで表示の差が出て困っています。Firefoxの方が自分の思ったとおりに表示されてます。

参考ページ
http://canada.ciao.jp/life/share.html

IEでもFirefoxと同じように表示させるには、一体上記CSSのどの部分を修正すべきなのでしょうか？それともIE用にCSSを書き換えないとだめなのでしょうか？

また、追加質問で恐縮なのですが、上記参考ページでもう1点、IEとFirefoxの表示の違いがあり、ちょっと困っています。ページ右側にある広告枠なんですが、IEだとFirefoxよりちょっと下側に表示されます。

#right {
margin: 20px 20px 0 600px;
padding: 10px 0 20px 0;
text-align: center;
}

おそらく、上のCSSのせいなのでしょうが、この20pxを失くすと、これまたおかしくなりで、困っています。

アドバイスよろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.1

回答者： himajin100000
回答日時：2007/07/26 17:31

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Q3201524 テストケース1</title>
<style type="text/css">
dl.ref{
margin: 0 20px;
padding: 0;
}
dl.ref dt{
margin: 0 0 5px 0;
padding: 2px 0 2px 20px;
list-style-type: none;
font-weight: bold;
color: #03C;
background: #DDD url("img/arrow.gif") no-repeat;
background-position: 0.5% 55%;
}
dl.ref dd{
margin: 0 0 5px 0;
background-position: 0.5% 55%;
}
</style>
</head>
<body>
<p>HTMLの文法上，ulの子として直接テキストは置けないから。li要素しか置けない。</p>
<p>こんなときにお勧めなのがdl,dt,dd要素だ。</p>
<dl class="ref">
<dt><a href="http://www.su.ucalgary.ca/ooch/listing.php">Univ … of Calgary の掲示板</a></dt>
<dd>NWのC-Train沿いの物件多くあり。ルームメイトはやはりU of C の学生が多い </dd>
<dt><a href="http://www.saitsa.com/studentservices.cfm">SAITの掲示板</a></dt>
<dd>様々な物件あり。但し、DTの情報は少ない。 </dd>


</dl>
<p>
属性を書くとき属性値がアルファベット等のみから構成されるもの等は【HTML4.01】では引用符がなくてもよいが，
#はこれに含まれないのでくくる必要があるよ。分けて覚えるのは結構骨が折れるだろうから、
全部括るって覚えておこう。
</p>
<p>後半は今から考えてくるよ</p>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

お返事遅れました。
上記のように従ったら、解決できました。それ以外のページでも同様の変更をせず、多少大変ですが、そもそも間違った使い方だったようなので、これを機に訂正します。dl,dt,ddタグは実は見たことあったのですが、その利用方法について軽視していました。

ありがとうございました。

通報する

お礼日時：2007/07/29 13:18

No.2

回答者： rainbowsix
回答日時：2007/07/27 16:08

2個目の質問に対して：

いっそのこと、#rightもfloatかましちゃったらいかがでしょう？
#right{
float:left;
width:180px;
margin:20px 20px 0px 0px;
padding:10px 0px 20px 0px;
text-align:center;
display:inline;
}
上記のようにして、マージンやらパディングやらを触ってみてください。確かFirefoxなどではfloatした要素の直後あたりは、上マージンが効かないなんていう仕様があった気がします。また、親要素にwidthの指定があるなしでもレンダリングが変わることがあります。フロート要素に横マージンを設ける場合、display:inline;は必須。コレが無いとIEでは横マージンを2倍取ってしまいます（バグ）。