How to prevent 3px extra bottom padding on list items in IE7

Question

I have a page where the infamous 3px extra vertical space (below each li element) is being rendered in IE7 on all my list items. I have a specific situation where I need text absolutely positioned within the li, so that its container can be set to a smaller width, & the text extends beyond the container. Here's the code I'm using:

<style type="text/css">
 div { width: 160px; font: 8pt arial,helvetica,sans-serif; border: 1px solid #999; }
  div ul { margin: 0; padding: 0; list-style: none; }
   div ul li { width: 30px; height: 20px; margin: 0 0 4px; padding: 0; background-color: #c00; }
    div ul li a { display: block; line-height: 20px; color: #000; text-decoration: none; }
     div ul li a em { position: absolute; margin-left: 5px; }
</style>

<div>
 <ul>
  <li><a href="#"><em>#1: premature brake wear</em></a></li>
  <li><a href="#"><em>#2: squeaky brakes</em></a></li>
  <li><a href="#"><em>#3: bad gas mileage</em></a></li>
 </ul>
</div>

I'm looking for a solution that doesn't involve an IE7-specific CSS hack, just for CSS purity's sake. I've read that in a lot of cases, giving the containing elements hasLayout resolves most of these 3px extra height issues, but I haven't been able to figure it out for this code.

In my app, I ended up applying a different margin-bottom for IE7 (1px rather than 4px) which works fine but just doesn't seem right....

Test page here

Live app here

I've tried some of the standard fixes described on 456 Berea St & this page, but either I'm applying them incorrectly to my example, or it's something else in the way my code is structured. Any suggestions for fixes or other ways to accomplish this layout?

Answer 1

Try the following:

<style type="text/css">
    div.test { width: 160px; font: 8pt arial,helvetica,sans-serif; border: 1px solid #999; overflow:hidden; }
    div.test ul { margin: 0; padding: 0; list-style: none;}
    div.test ul li { margin: 0 0 4px; }
    div.test ul li a { display: inline-block; }
    div.test ul li a { display: block; padding: 0 5px; line-height: 20px; color: #000; text-decoration: none; position: relative; z-index: 2; }
    div.test ul li b {   background-color: #c00; height: 20px; width: 20px; position: absolute; display: block; z-index: 1; }
</style>

<div class="test">
    <ul>
        <li><b></b><a href="#"><em>#1: premature brake wear</em></a></li>
        <li><b></b><a href="#"><em>#2: squeaky brakes</em></a></li>
        <li><b></b><a href="#"><em>#3: bad gas mileage</em></a></li>
    </ul>
</div>

I couldn't fix the problem you were having any cleaner than what you already have (the other fix is to float the LI's and clear them) however, I am giving you an alternative way of doing this. I admit it's the cleanest HTML, but it does neatly sidestep the problem.

Answer 2

I haven't tried it with this code, but I've specified a height in the li elements, then added vertical-align: bottom, so the code would be:

div.test ul li { height: 20px; vertical-align: bottom;}

Works for me in both ie 6 & 7