リストマークの位置がずれている リストの文字が複数行になった時

質問

IEとfirefoxで、リストマークの見え方が違ってしまってます。

例えば、
http://fortunehills.web.fc2.com/
のページにリストの表示があります。

画面左上に
「2009/6/30 火曜日」とありその下に、
株式のチャートアイコンがあり、その上にマウスを乗せるとズラリとリストがでます。
そのリストの２番目
「日興コーディアル証券｜オンライントレード（日興イージートレード） 」というのがあり２行になってます。

で、そのリストマークが２行目の横に来てしまってます。下揃えになってます。

他にも、同じＵＲＬの
news内の「perfumelab」のリストマークも下揃えになてます。

IEで見ると下揃えなのですが Firefoxでみると、上揃えです。
IEでも上揃えにするには、どのようにするのが良いのでしょうか？

原因などが何かあるのでしょうか？

回答No.2

abril · ベストアンサー

下記の全称セレクタで"zoom: 1;"が指定されている事が原因みたいですね。

* {
margin:0;
padding:0;
zoom:1;
}

これがあることで、リストの複数行に渡るアイテムの場合、マーカーが下付になってします様です。これを外すと意図通り表示されます。
このzoomプロパティはIEの独自拡張の為、Firefox等では元々無視されています。

あとこれは余計なお世話ですが、

ul {
margin:0px;
padding:15px;
list-style-type:disc;
list-style-position:;
}

最後のlist-style-positionプロパティの値が空になっています。初期値を適用するなら、（今の指定は無意味ですので）プロパティごと削除しておくべきですね。
No.1の方も少し触れていますが、そのご指摘部分を初めとしてHTMLの構造にはかなり色々突っ込みどころがありますので、一度文法チェッカーにかけるなどして基礎から見直されてみた方がよろしいかと思います。

お礼

ありがとうございます。非常に参考になります。

(人-)謝謝

回答No.1

think49

何度試してもIE8がフリーズするので見られませんでした。
ソース読む限りでは、IEのバグらしき情報が気になります。

-------
ul要素またはol要素に指定すると、各リスト項目がマーカーごとインデントされる。

CSS2対応状況ガイド:text-indent
http://www.zspc.com/documents/css2/text/textindent.html
-------

あとこれは本件に関連しないかもしれませんが、DTDは文書先頭に書いた方が良いと思います。
DTDが先頭にないと後方互換モードで動作するため、クロスブラウザ(特にIE)で苦労します。

Google検索: DTD スイッチ
http://www.google.co.jp/search?hl=ja&client=firefox-a&rls=org.mozilla%3Aja-JP%3Aofficial&q=DTD+%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&btnG=%E6%A4%9C%E7%B4%A2&lr=lang_ja

お礼

ありがとうございます。勉強になります。

(人-)謝謝