IE Disappearing Bullet Bug in Floated DIV

Answer 1

Try styling the bullet with the background attribute.

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

You might have to reset the padding and margin on your ul selector.

Answer 2

This fixes it in ie6 & 7:

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

Haven't had time to properly investigate, but it seems to be the inherited left margin of the sidebar that's causing the problem. Using padding on the ul fixes the weird behaviour in ie6 and ie7 but it doesn't play nice with standard compliant browsers so you need to add this style with your conditional lte ie7 css.

Hope this helps.

Answer 3

As suggested by others, use a background image instead of a bullet image.

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;
}

Works in IE6 and 7 for me, if it doesn't then you've got other problems with your code :)