[CSS] Default Windows IE ul list padding-bottom

programming web dev
1

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