<li> padding-left in ie 7

I have a very weired problem with indents of list elements in IE 7. Padding-left does not seem to have any effect. My html is 开发者_JAVA百科here http://pastebin.com/0TXXN3AZ. (The list elements are supposed to be a simple navigation on the left.) The css is

ul.navigation{
   width: 230px;
   padding-left:2px;
   display: block;
   float: left;
}

ul.navigation li{
   padding-left:2px;
   list-style: none;
}

ul.navigation li a{
   padding-left: 2px;
   display:inline-block;
}

ul.navigation li ul{
   padding-left:2px;
   list-style: none;
}

#content{
   margin-left: 260px;
   padding-right: 50px;
   font-size: 0.9em;
} 

In other browsers everything looks as expected. In IE 7 the intends are way to big an the list items expand into the content area. Any ideas?

Thanks in advanced,

Andreas

I recommend you to first use the YUI Reset CSS, that normalizes styles for all HTML elements among all browsers, and then safely customize the elements as you wish.

In case you can't use YUI Reset CSS, the problem could be that IE 7 is using margin rather than padding for ul/li elements.

So add this before your customizations:

ul, li {
 margin: 0;
 padding: 0;
}

And then customize the ul/li elements as you wish.