リスト(ul,li)を使用すると、ul要素で表示される「・」(IE、Fxデフォルト)を画像に変えることができます。

CSSプロパティの list-style-image を使えば解決…しそうなものですが、IE6.0とFirefoxでは表示の挙動が異なります。

もっと具体的には、画像の位置が異なります。

実際には、次のようになります。

Internet Explorer 6.0:



Firefox:



HTMLコード:
<ul style="list-style-type: none; list-style-image:url(mikan_kmd_listicon.gif);">
<li>いろはにほへと</li>
<li>ちりぬるを</li>
<li>わかよたれそ</li>
</ul>



見て分かるとおり、画像と文字の間に取られる空白が異なります。
そして、これは li 要素に margin を指定しようが、 padding を指定しようがどうにもなりません


ということで、リストに画像を使う場合は、li の background-image と padding で対応します。
要は、画像の大きさ分 padding-left をとる、と言うことです。

HTMLコード:
<ul style="list-style-type: none; background:url(mikan_kmd_listicon.gif); padding-left: 16px;">
<li style="background:url(mikan_kmd_listicon.gif); padding-left: 16px;">いろはにほへと</li>
<li style="background:url(mikan_kmd_listicon.gif); padding-left: 16px;">ちりぬるを</li>
<li style="background:url(mikan_kmd_listicon.gif); padding-left: 16px;">わかよたれそ</li>
</ul>


【初稿 2006/07/15 11:50:40】