CODEWITHSUNDEEP
htmlcss
Zymus
Zymus

Reputation: 1698

Default height of div is different than computed result

I have a webpage that contains a div. That webpage can only be accessed by users who have authenticated (the div contains the account/logout buttons). If the user has not authenticated, then it is simply a green bar of a fixed height. The font-size is 11pt, with padding of 0.25em on top and bottom. However, when I set the height of the div to 1.5em it is too short; by exactly 0.25em. So if I set the height of the div to 1.75em it is pixel-perfect.

Why must the height be greater than expected (1em (11pt) + 0.25em at top and bottom should be 1.5em)?

The css code I have is

#navbar
{
    clear:both;
    overflow:hidden;
    background-color: #006633;
    font-size: 11pt;
    height: 1.75em;
}

#navbarItems
{
    list-style-type: none;
    margin: 0;
    padding: 0;
    float: right;
}

.navbarItem
{
    display: block;
    float: left;
    padding: 0;
    margin: 0;
}

.navbarItemLink
{
    display:block;
    color: #ffffff;
    text-decoration: none;
    text-align: center;
    padding: 0.25em;
    font-size: 11pt;
}

and the HTML is

<div id="navbar">
    <ul id="navbarItems">
        <li class="navbarItem"><a href="editAccount.aspx" class="navbarItemLink">ACCOUNT</a></li>
        <li class="navbarItem"><a href="Logout.aspx" class="navbarItemLink">LOGOUT</a></li>
    </ul>
</div>

Upvotes: 1

Views: 38

Answers (1)

Cameron637
Cameron637

Reputation: 1719

Your line-height is adding extra pixels in between. Add

line-height: 1em;

To your navbar

Upvotes: 1

Related Questions