[CSS] Default Windows IE ul list padding-bottom

[fasterthanlight™]

Greetings,

So here I am creating ul's and styling them with CSS, and when I test in windows with IE, each list item has an added 10 or so pixel padding that spaces out the list items really awkwardly.

the HTML code is generic:

<ul id="childBlueList">
            <li><a href="#">National Institutes</a></li>
            <li><a href="#">Reginal Solutions</a></li>
            <li><a href="#">Technologoy &amp; Services</a></li>
        </ul>

and the CSS: (that works in every other browser in the world except blasted Windows IE!!)

.childBlueList
{
    display: block;
    list-style: none;
    margin: 0px;
    padding: 0px;
    border-bottom: 2px dotted #8aadc4;
}

.childBlueList li
{
    display: block;
    margin: 0px;
    padding: 0px;
}

.childBlueList li a
{
    display: block;
    color: #446d87;
    text-decoration: none;
    padding: 0px;
    margin: 0px;
    padding: 5px 0px 5px 0px;
    border-top: 2px dotted #8aadc4;
}

.childBlueList li a:hover
{
    background-color: #c5dff3;
}

What can I do? I've applied a global *{padding: 0; margin: 0;} and all my ul rules have padding and margin set to 0 except the li a chunk which has top and bottom padding of 5 px to make the buttons bigger...... Why IE??!?!!? WWWWHHHHYYY!?!?!?!?

[aldomatic]

trying putting each LI on one whole line.. ie like -> <li></li><li></li><li></li> insted of a bringing them down to the next line..

[fasterthanlight™]

trying putting each LI on one whole line.. ie like -> <li></li><li></li><li></li> insted of a bringing them down to the next line..

Ewwwwwwwwww




I'll try it

Here's some screenshots for you people:


Firefox: (Good)

Windows: (Bad)

[ditt0]

With styling, you could do this

li {
height: 1em;
}
html>body li {
height: auto;
}

[simplistik]

in

.childBlueList li a
{
    display: block;
    color: #446d87;
    text-decoration: none;
    padding: 0px;
    margin: 0px;
    padding: 5px 0px 5px 0px;
    border-top: 2px dotted #8aadc4;
}

add

height: 1%;

[simplistik]

trying putting each LI on one whole line.. ie like -> <li></li><li></li><li></li> insted of a bringing them down to the next line..

Just for future reference there's no difference between

<li></li><li></li>

and

<li></li>
<li></li>

the inline version just is formed uglier

[aldomatic]

well i had a problem awhile back that was fixed by that issue.. so i dunno weird bug i guess

[fasterthanlight™]

Nice one simp, you hit the nail on the head with that one, works perfectly now!