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

Answer 1

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;}

Answer 2

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?

Answer 3

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.

Answer 4

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.

Answer 5

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

Answer 6

"Display: inline" did the trick!

Thanks for your help! :)