CSSについて リスト表示のリストマークの表示位置

質問

カテゴリをリスト表示すると左揃いにならず、
なぜが左に余計な空白というか空間ができてしまいます。

リスト表示のリストマークの表示位置をもっと左にするにはどうすればいいですか？

/* カテゴリー */
div#sidebar-left li {font-size: 0.75em;
list-style-type: none;
background-image: url(listmark.png);
background-repeat: no-repeat;
padding-left: 16px;
margin-bottom: 4px;
vertical-align: top}

div#sidebar-left li a{color: #000000;
text-decoration: none}

div#sidebar ul{padding: 0;
margin: 8px 8px 20px}

回答No.2

naokita

NO.1です。
------------------------------
margin-bottom: 4px;
↓　↓
margin: 0 0 4px 0;
background-position: 0 50%;
-------------------------------
とかでどうでしょう？
数値は、多少変更して、さっきの padding を微調整しながら応用する。
何も動かないのは、おかしいので、
１回では無く、色々変更してみる事。そうすれば、何を変更すればどの様に動作するかが勉強になりますから。

list-style-image を使ってもいいけど、
今のままの background-image の方がリストマークの微調整が出来る。
好みでどっちでもいいですけどね。

お礼

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

margin: 0 0 4px 0;

引数が３個と思ってましたが、４つもあるんですね。。

回答No.1

naokita

●の数値を変更・追加・調整して見て下さい。
-----------------------------------------
li の左を全体的に位置設定するなら、

/* カテゴリー */
div#sidebar-left li {font-size: 0.75em;
list-style-type: none;
background-image: url(listmark.png);
background-repeat: no-repeat;
padding-left: ●px;
margin-bottom: 4px;
vertical-align: top}

div#sidebar-left li a{color: #000000;
text-decoration: none}

div#sidebar ul{padding: 0;
margin: 8px 8px 20px ●px}

----------------------------------------
画像だけ li 内で位置設定するなら、div#sidebar-left li　に、
background-position: ● ●; この行を追加して値を入れて調整。

両方とも一緒に変更しながら調整すると上手くいきます。
----------------------------------------
vertical-align: top　は、不要では？

お礼

ありがとうございます。

すべて０にしましたが、変りませんでした。
IE8のLISTの表示の仕方が変わったのかな・・・
もうちょっとがんばってみます。