Control Height of <li> in IE 7

Question

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>

Answer 1

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>

Answer 2

Set your css for the LI to display: block;.

Answer 3

Maybe you should try setting your li as follows:

li{
   display:block;
   float:left;
   height:myHeight;
   clear:right;//may be necessary, can't check with IE7
}

This is what I've done with similar problems.

Answer 4

In addition to Daniel A. White answer you can experiment with line-height to center your text vertically and create the necessary height.

Answer 5

Do what was suggested in the previous posts. If these changes are causing issues in browsers other than IE, you can do the following to have only IE use them:

.selector {
    prop1 : val1; /* default value for all browsers */
    *prop1 : val2; /* only IE will pick this one up and it will override the initial value of prop1. */
}

This works much better than trying to do special commenting to include separate style sheets, etc.

Answer 6

Have you tried adding a line-height attribute to .menu ul li?

Else have you tried using horizontal rule <hr> as a separator instead? If you're using horizontal rule, you can set the margin-top and margin-bottom to 0px and see what happens. Can't guarantee it looks the same on IE and other browsers, but at least you tried. =)