The Problem

You've got some floating ul or li elements, and you're trying to line them up in a vertical list or in a grid. You have something that looks fine in Firefox or Safari, but in IE you have large vertical margins (whitespace) between your elements that can't be removed.

An Example

Here is some markup that will illustrate the problem:

<div id="example">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <ul>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
</div>

And here is the stylesheet:

#example ul {
  clear:left;
  list-style-type:none;
}

#example li {
  background-color:#d0d0d0;
  border:solid 1px white;
  float:left;
  padding:0.25em;
  width:2em;
}

Here is how we expect it to look, and how it does look in Firefox and Safari (image):

Firefox displays correctly

In IE7, we see a large margin inserted between our two rows (image):

IE7 has an unwanted bottom margin

Finally, here is how your browser renders this example:


The Solution

No amount of "normal" CSS fixes (such as changing margin and padding) will fix this problem.

The usual "Holly Hack" or "hasLayout" fixes are no help here, either -- these fixes are used to fix margin errors where li elements have a tags inside them that are set to display:block. That is not the case here.

The solution to this issue is to set display:inline on the element that is stacking vertically. In my example, the ul is being stacked vertically, so that's what I would set to inline. If you were working on a Suckerfish-style menu, it would probably be your li elements that are stacked vertically, so you would apply the fix there.

The problem with this fix is that it breaks your UI in every other browser. In Safari, the clear:left will be ignored and all of your elements will show up on one line. In Firefox, you get something that looks like this (image):

Firefox displays incorrectly when IE hack is applied

So, you will need to hide this fix from any non-IE browser using one of the many IE7 CSS hacks floating around. Here are three ways to fix my example above, listed in order of preference.

Conditional Comments

Put the following in your HTML file, underneath the rest of your style tags:

<!--[if lte IE 7]>
  <link type="text/css" href="ie7_hacks.css" rel="stylesheet" />
<![endif]-->

In your new ie7_hacks.css stylesheet file, put the following style (along with any other styles that need to be IE7-or-earlier-specific):

#example ul {
  display:inline;
}

In my opinion, this is the cleanest solution available.

Star-Plus Method (Element-Level Fix)

Put the following in your standard stylesheet:

*+html #example ul {
  display:inline;
}

If you can't (or won't) create a second stylesheet, or you don't have access to edit the HTML of your page, this is your best option. It's a little ugly, but it's still valid CSS.

Star-Hack

Put the following in your standard stylesheet:

#example ul {
  *display:inline;
}

This method is strongly discouraged. This hack will work, and it even looks a little cleaner than the one above, but it is not valid CSS. Your page will generate errors if you run it through any sort of CSS validator.

If you have found another solution to this problem, please let me know.