div内の順序付けられていないリストが正しく表示されないのはなぜですか？

Question

div内に順序付けされていないリストが各リストアイテムの背景イメージとともに表示されています。しかし、リストは、Internet Explorerで正しく

Rendered Output http://img694.imageshack.us/img694/7204/screenshotjv.jpg

8.

問題が表示されない場合は、リストの左と上にあまりにも多くのスペースがあるです。各リスト項目間だけでなくリストを上の画像セクションと完全に一致させたいので、左上、上、または各項目の間に空白がないようにします。

HTML：

<div id="top"> 
    <div id="topimage"> 
     <center> 
      <img src="image.jpg" alt="image"/> 
     </center> 
    </div> 
    <ul class="list"> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     <li>Item 3</li> 
    </ul> 
</div> 

CSS：

#top { 
    width: 255px; 
    float:left; 
    margin:3px; 
} 

#topimage { 
    width: 245px; 
    border:1px solid #bcc5c8; 
    padding:3px; 
} 

.list li { 
    background-image:url(../images/list_sub.jpg); 
    width: 245px; 
    height:23px; 
    list-style:inside; 
    list-style-image:url(../images/listarrow.gif); 
    margin:0px; 
    padding:0px; 
} 

私はゼロにマージンとパディングを設定しようとしたが、それは動作しませんでした。また、画像の周囲に余分なスペースがないことを確認しました。助言がありますか？

Answer 1

ここではいくつかのものは、あなたが調整することができます：

1. はスパンであなたのリスト項目の内容をラップし、代わりにスパンにリスト項目の矢印を適用し、スパンに矢印よりもわずかに大きいパディング左価値を与えますgifの幅。

2. list-style-imageプロパティを使用しないで、list-style：none;を指定します。左揃えのx-browserを得る。一般的にlist-style-imageではなくリスト項目の背景画像プロパティを使うべきですが、liの背景画像もあるので余分なスパンが必要です。

3. 幅と高さを適用するのと同じ要素にはパディングを適用しないでください。彼らはクロスブラウザをレンダリングしません。代わりに親要素にwidth/heightを指定し、内部ラッパー要素にパディングを指定します。

4. 一般に、idルールは避けるべきです。それらは大きく特定され、再利用不可能なスタイル定義になります。スタイル定義のオーバーライドが困難になります。

5. リスト項目を互いに接触させるには、それらに指定された線高さが要素の高さ以下であることを確認します。私は、リスト項目のスタイルはそれを修正すると思うが、この設定も再確認する。

これで問題が解決しない場合は、背景画像へのリンクを投稿して、小さな例を模索します。