Question

I have the following html for a simple navigation:

<header>
    <div class="login">
        <ul>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
        </ul>
    </div>
</header>

I have the following css:

header {
    height: 145px;
    border: 1px solid #f00;
}

.login {
    float: right;
}

.login ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.login li {
    display: inline;
}

.login li a {
    color: #fff;
    background-color: #666;
    padding: 5px 10px;
}

I am using HTML5 boilerplate so my header is displayed as a block element. When I view the page in a modern browser the result looks like:

Why is the anchor padding extending outside of the red border/header element? What is causing this behavior?

Furthermore, when I view the same page in IE compatibility view, it now looks like:

Here it seems like the padding is not applied at all or cut off by the containing div. I tried setting a height for the div but the result was still the same. What is causing this behavior?

Thanks

Answer 1

Try putting a display:block on .login li a and put a float:left on the .login li

Also you can shorten your code and take out the unnecessary div and just put the class on the ul.

HTML:

<header>
    <ul class="login">
        <li><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
</header>

CSS:

header {
    height: 145px;
    border: 1px solid #f00;
}

.login {
    list-style: none;
    margin: 0;
    padding: 0;
    float:right;
}

.login li {
    float:left;
}

.login li a {
    color: #fff;
    background-color: #666;
    padding: 5px 10px;
    display:block;
}

http://jsfiddle.net/KPzUv/