The Art & Science Of CSS

Any read this book from sitepoint forums?
Just one problem with vertical menu on page 88
the heights are differents on firefox and ie, why?

Hi,

You should post the code when querying something from a book as not everyone here has the book in question :slight_smile:

I assume you mean this code.


<!DOCTYPE html PUBLIC "-//W3C//dtD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/dtD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Vertical Navigation</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
html {
    font: small/1.4 "Lucida Grande", Tahoma, sans-serif;
}
body {
    font-size: 92%;
}
#nav {
    margin: 0;
    padding: 0;
    background: #6F6146;
    list-style-type: none;
    width: 180px;
    float: left; /* Contain floated list items */
}
#nav li {
    margin: 0;
    padding: 0;
    float: left; /* This corrects the */
    width: 100%; /* IE whitespace bug */
}
#nav a {
    display: block;  /* to increase clickable area as a's default to inline */
    color: #FFF;
    text-decoration: none;
    line-height: 2.5;
    padding: 0 15px;
    border-bottom: 1px solid #FFF;
}
#nav #nav_con a {
    border: none;
}
#nav a:hover {
    background: #4F4532;
}
#body_hom #nav_hom a, #body_map #nav_map a, #body_jou #nav_jou a, #body_his #nav_his a, #body_ref #nav_ref a, #body_con #nav_con a {
    background: #BEB06F;
    color: #1A1303;
    font-weight: bold;
}
</style>
</head>
<body id="body_his">
<ul id="nav">
    <li id="nav_hom"><a href="/">Home</a></li>
    <li id="nav_map"><a href="/maps/">Maps</a></li>
    <li id="nav_jou"><a href="/journal/">Journal</a></li>
    <li id="nav_his"><a href="/history/">History</a></li>
    <li id="nav_ref"><a href="/references/">References</a></li>
    <li id="nav_con"><a href="/contact/">Contact</a></li>
</ul>
</body>
</html>


The menu is slightly higher (about 3 pixels) in IE due to the rounding errors associated with the 92% font-size.

If you used :


body{font-size:12px}

Then they will all be exactly the same but of course doesn’t allow the flexibility that percentages/ems allow. There will always be rounding differences when using ems/percentages and a couple of pixels here or there shouldn’t really matter. If it does then you will need to set the size in pixels instead and take a hit on accessibility.

Then the only way to solve this on the future, is always use px instead em.
I´ll try this today, i think this example is the better and easy I found to make vertical css menus.
Thanx a lot!!!