2009-06-01 13 views
1

これに関するフォーラムの提案がありますが、まだ私の成功の兆しは見えていません。IE浮動小数点型DIVの消えるバグのバグ

私は弾丸画像を使用するようにスタイルされたULを含む浮動小数点divを持っています。準拠しているすべてのブラウザーで、画像はきれいに表示されます。 IE 6でページをリフレッシュすると、弾丸が頻繁に表示されますが、ページがスクロールすると再び消えます。 IE 7では、表示されません。

ページはこちらです:

http://hiv411.org/page.php?pID=13&n=Other_STDs

関連するCSS:

#hiv101STDSidebar UL { 
width:215px; 
} 

#hiv101STDSidebar LI { 
position:relative; /* added per some forum post, no effect*/ 
list-style-image:url(/images/layout/squareBulletBlue.gif); 
} 

任意の提案は大歓迎します。テーブルとしてそれらのULを書き直さなければならないのは残念です!

答えて

3

他の人に示唆されているように、弾丸イメージの代わりに背景イメージを使用します。

HTML

<div id="floated"> 
     <ul> 
      <li> 
       Item 
      </li> 
      <li> 
       Item 2 
      </li> 
     </ul> 
    </div> 

CSS

div#floated { 
    float: left; 
} 

ul { 
    padding: 0; 
} 

li { 
    background: transparent url(squareBulletBlue.gif) no-repeat 0 2px; 
    list-style-type: none; 
    padding-left: 1.2em; 
} 

IE6で動作し、私のために7、それはあなたがあなたのコードで他の問題:)

+0

ありがとうございます。実装され、今私は幸せに死ぬことができます!もしあなたがニューオーリンズにいたら、私はあなたにビールを借りている! – jerrygarciuh

+0

先月にそこにいた:) –

2

背景属性で箇条書きをスタイリングしてみてください。

selector li { 
    background: transparent url(/images/layout/squareBulletBlue.gif) left center no-repeat; 
    paddding-left: 25px; 
} 

あなたulセレクタにpaddingmarginをリセットする必要がある場合があります。

+0

を持っていない場合、私が試しましたそれはアウト。同じ結果。 IE6では断続的に表示され、IE7では表示されません。 返信いただきありがとうございます! JG – jerrygarciuh

+0

これはうまくいくはずです。何か別のことが起こっています。いくつかのコード例を追加して投稿します。 –

2

これはIE6 & 7でそれを修正します。

#hiv101STDSidebar ul { 
    width: 215px; 
    margin: 0 0 0 0; /* resetting margin */ 
    padding: 0 0 0 40px; /* using padding to position ul */ 
} 

は適切に調査する時間がなかったが、問題を引き起こして、サイドバーの継承された左余白のようです。 ulでパディングを使用すると、ie6とie7の変な動作が修正されますが、標準準拠のブラウザではうまくいきませんので、このスタイルを条件付きのie7 cssで追加する必要があります。

これが役に立ちます。

+0

返信いただきありがとうございます! – jerrygarciuh

関連する問題