IE6 Bullet Point Alignment Problem

Question

Hello,

I am currently having some problems with <li> in IE6 essentially my code looks like this,

<ul>
  <li>some filler text some filler text</li>
  <li>some filler text some filler text</li>
  <li>some filler text some filler text</li>
</ul>

The problem come when I view the page in IE 6 the bullets and the text do not line up as you would expect has any one ever encountered this problem before, for the record here is the CSS for the div and li concerned.

    #contentMiddle li
    {
    /*background-image:url(../images/bullet.gif);
    background-repeat:no-repeat;
    background-position:left bottom;
    text-align:left;
    list-style-position:outside;*/
    list-style-image:url(../images/bullet.gif);
    list-style-position:inside;
    text-align:left;
    margin-bottom:5px;
    }

    #contentMiddle
    {
    background-color:#A3BAD9;
    padding-left:20px;
    padding-right:20px;
    }

Thank you for your help

sico87 :-)

Answer 1

You should decide whether you want to use background-image or list-style-image to add the bullet. I'd advise for the background-image solution as the other one has problems in IE6, as you saw already.