Question

CSS is not my strong suit, and I am not sure what’s going on with my list items in IE6. I want them to align vertically, but the first list item is always being pushed a pixel or two two far to the right, so it no longer lines up with the other members in the list. As far as I’m concerned, this list looks fine in IE7/8, FF3, and Chrome 2 (all on Windows).

Here’s what it looks like in IE6… note that Vangala’s entry is improperly indented:

alt text http://img254.imageshack.us/img254/8123/ie6liindent.png

Here is my relevant CSS:

.organizer-label {
    float: left;
    width: 145px;
}

.organizer-value {
    margin-left: 150px;
}

.organizer-value ul {
    margin-left: 1em;
    margin-top: 0;
    padding-left: 0;
    padding-top: 0;
    line-height: 1.1em;
}

Here is my relevant html:

<div class="organizer-subsection">
  <div class="organizer-label">Committee members:</div>
  <div class="organizer-value">
    <ul>
      <li>Vangala Subrahmanyam, Sai Advantium Pharma Ltd, Pune, India</li>
      <li>Ramaswamy Iyer, Bristol-Myers Squibb, Lawrenceville, USA</li>
      <li>Ragu Ramanathan, Bristol-Myers Squibb</li>
    </ul>
  </div>
</div>

Am I doing something stupid and just getting lucky that it looks okay in most browsers? What can I do to make the list line up correctly in IE6?

Answer 1

You need to apply hasLayout to the div .organizer-value

.organizer-value {
    margin-left: 150px;
    zoom:1;
}