CODEWITHSUNDEEP
cssinternet-explorer-7html-lists
acnb
acnb

Reputation: 13

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

Upvotes: 1

Views: 3810

Answers (1)

Behrang Saeedzadeh
Behrang Saeedzadeh

Reputation: 47913

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.

Upvotes: 7

Related Questions