Take the 2-minute tour ×

I have a navigation bar at the top of a page. In FF and Chrome the navigation bar displays fine. However in IE8 (with or without compatibility) the UL seems to indent from the left hand side, not each li just the whole li; despite declaring

text-align:center; width:600px; margin:auto; padding-left:0;

Any ideas what could be causing this?

share|improve this question

4 Answers 4

up vote 21 down vote accepted

In Firefox the UL is padded left by default, in IE it has a left margin.



border:1px solid red;

border:1px solid green;



share|improve this answer

I just used ul { list-style-position:outside; } to fix the indent in IE.

share|improve this answer
thumbs up. most of the answers i get are margin:0, padding 0. This is also needed for IE so that it works like other browsers. –  Ray Zhou Aug 2 '11 at 4:09
Very usefull, thanks! –  Makc Mar 6 '12 at 16:43
This was the anwser ! –  Kyobul Apr 6 '12 at 20:32
I always forget about this silly bit and then revisit the issue some months in the future - nice post. –  Brandt Solovij May 21 '12 at 23:04

I think it should be:

ul { padding: 0; margin: 0 } 
li { padding: 0; }
share|improve this answer

Using list-style-position:outside; specifically for IE6/IE7 worked for me. However, note that this may only be necessary if you're using list-style-position:inside; for other browsers and simply hiding the default list margin/padding by setting them to 0. Working with IE requires some finesse, and a lot of browser-specific CSS.

share|improve this answer

Your Answer


