Disc to left of list item is displayed at bottom

Question

Screenshot of what is happening:

It is just a list item within an underordered list, this is happening in IE7 and nowhere else.

<ul>
  <li>Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text. Filler text.</li>
</ul>

.fancybox-entry.computer-policy li {
    float:none;
    width:100%;
    list-style-type:disc;
    margin-bottom:10px;
}

.fancybox-entry.computer-policy ul + p {
    margin-bottom:20px;
}

.fancybox-entry.computer-policy ul {
    margin:5px 0 10px 25px;
}

Any help as to why it is doing that and a fix is appreciated.

Answer 1

It appears that the width CSS property triggers hasLayout for the li element in IE7. First try removing the width:100%; declaration to make sure the bullet appears in the correct place. If you can't do without the width property, you can use position: relative; and vertical-align: top; to move the bullet back into place, as outlined at http://www.gunlaug.no/tos/moa_26.html.

Note that the code on that page uses hacks to target IE6 and IE7. I recommend using conditional comments instead, like so:

<!--[if IE 7]>
  <style type="text/css" media="screen">
    /* IE7-specific CSS here */
  </style>
<![endif]-->