Forum Moderators: not2easy
I'm at a loss as to what's wrong, or how to solve it.
<?xml version="1.0" encoding="utf-8"?>
<!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> Test Menu </title><style type="text/css">
<!--
body { background: #ccc; margin: 0; padding: 0; }
#nav {
background: red;
margin: 0; padding: 0;
background: orange;
width: 300px; /* Door deze breedte te wijzigen past het hele menu zich aan */
margin-left: 10px;
margin-top: 5px;
}
#nav ul {
margin: 0; padding: 0;
}
#nav ul, #nav li
{ list-style: none;
}
#nav li {
width: 100%;
}
#nav li a {
display: block;
background: yellow;
text-align: center;
border: 1px solid black;
width: 100%;
text-decoration: none;
font-weight: bold;
margin-bottom: 2px;
}
/* Hover state */
#nav li a.activepage {
background: blue;
color: yellow;
width: 100%;
}
#nav li a:hover {
width: 100%;
background: blue; color: yellow;
}
#nav ul.lvl2 {
margin-left: 20px;
}
#nav ul.lvl2 ul.lvl2 {
margin-left: 20px;
}
-->
</style>
</head>
<body>
<ul id="nav">
<li>
<a href="http://mysite">Home</a>
</li>
<li class="activepage">
<a href="about.php">Over Ons</a>
<ul class="lvl2">
<li>
<a href="missie.php" class="activepage">Onze Missie</a>
</li>
<li class="last">
<a href="naam.php"
class="last">Onze Naam</a>
<ul class="lvl2">
<li>
<a
href="ontstaan.php">Ontstaan</a>
</li>
<li>
<a
href="organisatie.php">
Organisatie</a>
</li>
<li class="last">
<a href="samenstelling.php"
class="last">Samenstelling</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href="fotos.php">Foto's</a>
</li>
<li>
<a href="producten.php">Onze Producten</a>
</li>
<li>
<a href="kooponline.php">Koop Online</a>
</li>
<li>
<a href="publicaties.php">Publicaties</a>
</li>
<li>
<a href="contact.php">Contact</a>
</li>
<li class="last">
<a href="reacties.php">Klantenreacties</a>
</li>
</ul>
</body>
</html>
[edited by: Darkelve at 11:17 am (utc) on Aug. 26, 2008]
I'm loathe to name what is happening because while it appears as ie6's "link hover", SuzyUK caused a re-think about this in IE CSS Bug - Link Hover Causes Shifting Text [webmasterworld.com]. Try searching on "collapsing margins" "creeping text" and variations for discussions and cures.
It arises when there is some combination of margin/padding/border/background-color/color/font-weight/underline change between a: and a:hover - or a failure to declare those things explicitly on either. (The guru's have reduced that list of possibilities, but that's when I've noticed it) Applying * {zoom:1.0} is a grand cure-all, but have personally had mixed results with it.
Ideal is to strip your code to find the culprit element, but a hacky fix in this case is to counter-balance the 2px margin-bottom in #nav li a by applying a margin-top to #nav ul.lvl2:
#nav ul.lvl2 {
margin-left: 20px;
margin-top:2px;
}
[edited by: Darkelve at 12:32 pm (utc) on Aug. 26, 2008]
