Geek Answers Handbook

IE adds extra maximum margin to each li element

I am currently doing IE hacks on the website I'm working on: http://www.timkjaerlange.com/wip/co2penhagen/

I am having a problem with this unordered list. IE seems to add an extra top edge for each li element, which makes my navigation look like a flight of stairs: http://dl.getdropbox.com/u/228089/ie-prob.jpg

I am using conditional comments for the target IE. I tried:

ul#mainnav li { top-margin: 0;}

But it does nothing. I wish there was a Firebug plugin in IE that would make it easier to solve such problems.

Any ideas on what might cause this problem?

+4
source share
4 answers

To get the behavior you are looking for, try "display: inline" instead of "float: left". Add both:

ul # mainnav {display: inline}

ul # mainnav li {display: inline}

A great resource for listing customization information can be found at A List Apart .

+7
source

top-margin is not a CSS attribute. Are you looking for margin-top

Edit:

 ul#mainnav li { top-margin: 0;}

To:

 ul#mainnav li { margin-top: 0;}
+2
source

err..sorry if this is a dumb question, but shouldn't it be margin-top?

Perhaps you should consider setting up a well-designed reset.css (or this one ) file for your use?

+1
source

You're right. However margin-top does not solve the problem

I use Eric Meyer reset.css, complete with 960gs, which I use to prototype the design.

0
source

More articles:


All Articles