画像とテキスト間の調整

[新着] Webテンプレートを仮オープンしました

0   名前： ギンペイ ： 2006/12/07（木） 00:01  ID:isnON0KM
皆さんに助けていただき、ようやくここまで来たのですが、
最後に画像（赤、グリーン）やサークルマークとテキスト（文字）”この列〜”間の間隔をレイアウトを変えずに調整したいのですが、（画像などと文字の間隔をもっと狭くしたいのです）
何か良い方法がありましたらお教え願えないでしょうか。
宜しくお願い板します。


<html>
<head>
<title>TAG index Webサイト</title>

<style type="text/css">
<!--
ul { list-style-image:url("http://www.nizm.co.jp/sitemap/red.gif");
margin: 0px 0px 0px 16px;
padding: 0px;font-size:15 ;font-family: 'MS ゴシック';
color:#0000FF; letter-spacing:1px;
}


ul ul { list-style-image:url("http://www.nizm.co.jp/sitemap/green.gif");
margin: 10px 0px 10px 19px;
padding: 0px;font-size:12px; font-family: 'MS ゴシック';
color:#000000;line-height:1.5;}


-->
</style>

</head>
<body>


<TABLE width="300" height="200"cellpadding="0" cellspacing="0" border="1">
<TR ><TD width="300" valign="top" align="left">

<ul>
<li>この列は赤画像マーカー
<ul>
<li>この列はグリーン画像</li>
<li>この列はグリーン画像</li><BR>


<li style="list-style-image:none;list-style-type:disc;">←この列はにサークルマーク</li>

</ul>
</li>

<li>この列は赤画像マーカ-</li>
</ul>

</TD></TR>
</TABLE>


</body>
</html>
1   名前： 元帥 ： 2006/12/07（木） 00:01  ［URL］  ID:w7tbH5Ra
この質問板はギンペイさんだけが利用しているわけではないので、初めてこのスレを見る方々の為にも、今までの経緯を紹介しておいてくれると有難いです。
http://www.tagindex.com/cgi-lib/q3bbs/patio.cgi?mode=view&no=422
http://www.tagindex.com/cgi-lib/q3bbs/patio.cgi?mode=view&no=423
http://www.tagindex.com/cgi-lib/q3bbs/patio.cgi?mode=view&no=424

borderを表示させるとお分かりかと存じますが、ブラウザ解釈上、マーカーってのはちょっと厄介なのです（＾＾；
どうも、マージンとボーダー領域との間に形成されるみたいです。
因みに
list-style-position:inside;
により、IE6では間隔を狭める事ができましたが、その目的のためのプロパティとその値ではないので、他のブラウザで同様の表示は期待できません。

Opera等のブラウザしかまだ実装していませんが、contentで画像やマーカー文字を表示させるのも一つの方法です。

marker-offsetという、今回の件では最も便利なプロパティも存在しますが、どのブラウザもまだ実装していないといった状況です。
気長に待つしかないですね。

現状では、imgや単なる文字で、マーカー代わりに表示させるのが得策と思われます。
一覧へ戻る