IE 9 adds "offset" to nested ul

Question

I'm trying to create a horizontal list whose sublists stack vertically, i.e,

A   B   C1   D   E
        C2

Here's a fiddle with a MWE: http://jsfiddle.net/jsx4S/

Also going to include the code here:

<ul>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li>
    <ul>
        <li><a href="#">C1</a></li>
        <li><a href="#">C2</a></li>
    </ul>
</li>
<li><a href="#">D</a></li>
<li><a href="#">E</a></li>
</ul>

And the relevant CSS:

ul
{
list-style: none;
display: inline;
}

li
{
float: left;
width: 100px;
height: 50px;
margin-right: 25px;
}

li a
{
text-decoration: none;
padding: 4px 20px 4px 4px;
color: black;
border: 1px solid;
}

The styling seems to work just fine in Firefox but in IE9 the browser adds a (seemingly) random "offset" of 20 pixels to C1. How can I get rid of this offset so C1 is inline with the parent list items?

Answer 1

It looks like there's some padding on the inner UL from the user agent stylesheet

I added an extra rule to remove it, and it seems to work:

li ul
{
    padding: 0
}

http://jsfiddle.net/jsx4S/2/

The same thing seems to also happen to the parent UL, which shows up on the "E" element To fix that one, just remove the padding from the parent UL as well.

You could also consider using a browser reset, which may automatically reset padding, at least so its consistent between browsers.

Answer 2

add padding:0; to ul and it's gone. chrome does it too it standard add a start-padding of 40px to every ul. You should look into cross-platform resets. example; http://necolas.github.io/normalize.css/