Control Height of <li> in IE 7

css, html-lists, menu

Solution

The problem is that ie6/ie7 will expand an empty element to the height of your font. You can get around this by adding `font-size:0` and `line-height:0` to `.menu ul li.separator`.

A better solution would be to add a thicker bottom border to the `<li>` that is before the separator.

.menu ul li.sep {border-bottom-width:6px}

<div class="menu">
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li class="sep"><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
    <li><a href="#">Item 5</a></li>
    <li><a href="#">Item 6</a></li>
  </ul>
</div>

Problem

I have a menu built with `<ul>` and `<li>` tags. I want to have small separators between sections. For the separators, I just set a background color and a short height on an `<li>`. Looks very nice... except in IE7 where the `<li>` seems to refuse to change its height to be shorter than all the other `<li>`s in the same `<ul>`. I have tried different ways of affecting the height of the separator `<li>` (height, line-height, font-size) with no success. I have a fix that will leave the separator height as is and color the whole background in IE 7, but that is not really the appearance I want (the separator is too big). Can anyone think of another way to control the height of an `<li>` tag? Here is a sample - in IE8 toggling compatibility view will show the problem: ``` <style type="text/css"> .menu { width:100px; } .menu ul { list-style-type:none; border-top: solid 1px red; padding: 0px; margin:0px; } .menu ul li { border-bottom: solid 1px red; padding: 0px; margin:0px; white-space:nowrap; } .menu ul li a { font-size: 13px; text-decoration: none; color: black; display: block; padding: 3px; } .menu ul li a:hover { color: blue; text-decoration: underline; } .menu ul li.separator { height:4px; background-color:red; } </style> <div class="menu"> <ul> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> <li><a href="#">Item 3</a></li> <li class="separator"></li> <li><a href="#">Item 4</a></li> <li><a href="#">Item 5</a></li> <li><a href="#">Item 6</a></li> </ul> </div> ```

Original source