IE adds extra top-margin to every li-element.

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

I got a problem with this unordered list. IE seems to add extra top-margin for every li-element, making my navigation look like a flight of stairs: http://dl.getdropbox.com/u/228089/ie-prob.jpg

I'm using conditional comments to target IE. I tried:

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

But that doesn't do anything. I wish there was a Firebug-style plugin for IE, that would make it easier to sort out problems like these.

Any ideas reg. what could be causing this problem?

From stackoverflow

• top-margin isn't a CSS attribute. You're looking for margin-top

  Change:

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

  To:

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

• err..sorry if this is a silly question, but shouldn't that be margin-top?

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

• You're right. However margin-top doesn't solve the problem

  I use Eric Meyer's reset.css, it's bundled with 960gs that I use for prototyping the design.

• To get the behavior your looking for try "display: inline" instead of the "float: left". Add both:

  ul#mainnav { display: inline }

  ul#mainnav li { display: inline }

  A great resource for info on customizing lists can be found on A List Apart.

• If I do "clear:both" on the list-elements I get the following: http://dl.getdropbox.com/u/228089/ie-prob2.jpg

• "Display: inline" did the trick!

  Thanks for your help! :)