problem with list display in IE

[whiteboxer]

I'm building a web site with a stacked ul for the main navigation. Everything looks great except in IE. For some reason, IE 6 and 7 is increasing the space between the li items. It works fine in Firefox and Safari. I've messed around with the margins and padding to no avail. I haven't been able to find any bugs or hacks that address this problem, and I don't ever remember having it before. I don't know if I'm overlooking something in my code that's wrong or missing, or if there is a bug I'm not aware of.

Here's the url of the site: http://royalcoffeeandtea.com/index.htm

Heres the CSS code for the navigation:

#navigation {
float:right;
width:255px;
text-align: left;
margin:-0.8em 0 0 0;
}

#navigation li {
list-style:none;
font:9pt "Trebuchet MS", MetaBook-Roman, "ITC Officina Sans Book", sans-serif;
margin:0;
padding: 0 0 1px 0;
}

The url for the stylesheets is here (2 different files):

http://royalcoffeeandtea.com/include...css/layout.css

http://royalcoffeeandtea.com/include...textstyles.css

[Paul O'B]

Hi,

IE always has problems with lists and you need to force "layout" (see faq on "haslayout"). The easiest way to force layout is simply to add a dimension where possible.

This will fix the big gaps.

To fix the discrepancy thats left its best to float the list and the anchors and then all gaps are cleared and firefox and ie will be virtually the same.

You have also forgotton to take care of teh default margin and padding that is appluied by default to the ul. Mozilla applies a top an bottom 1em margin and a 16px left padding (for the bullet). ie applies a bottom margin only and 16px left margin (not padding). So you can see that you always need to control all margins and padding on every element you use. (see faq tips).

Heres the code to fix your layout:

#navigation {
 float:right;
 width:255px;
 text-align: left;
 margin:0;
}
#navigation ul{margin:10px 0 0 50px ;padding:0;}
#navigation li {
 list-style:none;
 font:9pt "Trebuchet MS", MetaBook-Roman, "ITC Officina Sans Book", sans-serif;
margin:0;
 padding: 0 0 1px 0;
 width:200px;
float:left
}
#navigation a {
 color:#fff;
 text-decoration:none;
 width:200px;
 float:left;
}

Hope that helps