IE adds extra top-margin to every li-element

Question

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 regarding what could be causing this problem?

Answer 1

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.