SitePoint Sponsor |
|
User Tag List
Results 1 to 2 of 2
Thread: problem with list display in IE
Hybrid View
-
Aug 10, 2006, 11:00 #1
- Join Date
- Aug 2005
- Posts
- 84
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
problem with list display in IE
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
-
Aug 10, 2006, 16:53 #2
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
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:
Code:#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; }
Bookmarks