Extra space (padding) with List Items in IE

For the past couple of days, I’ve been trying to figure out why a design I had been working on was showing extra padding (veritcally) in IE. I think I’d seen every solution such as: write the code like this:

<li>Item one</li><li>
Item two</li>

or make set them to float: left | right (which messed up the way the list was showing up…

The only thing that worked for me - was setting the line-height to the be the same size as the font-size used for the list. ie:

li {
font-size: 12px;
line-height: 12px;
}

And then you can add your own specific padding or margins as needed… Hope that saves someone the headache I just went through!!

3 Responses to “Extra space (padding) with List Items in IE”

  1. WebWeaver Says:

    Thanks! exactly what I was searching for… couldn’t figure this out with out adding a tons of stuff. This was easy and works!

  2. Nate Says:

    wow, thanks. I was trying to figure this out, too

  3. Jackson Capper Says:

    Hooray hooray, thankyou so much

Leave a Reply

Subscribe without commenting