nicht angemeldet
Hallo,
Wenn ich mit der Maus über diese Links nach unten ziehe, geben die inneren ihren Abstand zueinander auf.
Tipp zur Fehlersuche:
Versuche das Problem so weit wie möglich einzugrenzen. Es tritt nämlich auch in folgendem Beispiel schon auf:
...
<html>
<head>
<title>Service</title>
<style type="text/css">
<!--
.link1
{display:block; width:7.5em; height:1.6em; margin-bottom:25px;}
.link1:link
{color:#E0DDDD; background-color:#AAA;}
.link1:visited
{color:#808080; background-color:#E0DDDD;}
.link1:hover
{color:#FFF0E1; background-color:#AAA;}
.link1:active
{text-decoration:none; font-weight:bold; color:#00000A; background-color:#FFF0E1;}
-->
</style>
</head>
<body>
<a href="#" class="link1">Service</a>
<a href="#" class="link1">Kontakt</a>
<a href="#" class="link1">Impressum</a>
<a href="#" class="link1">e-mail</a>
<a href="#" class="link1">AGB</a>
<a href="#" class="link1">Startseite</a>
</body>
</html>
Btw.: Ich habe Deine Klassenbezeichnung leicht abgeändert. Es ist _nie_ eine gute Idee solche Bezeichnungen mit bereits belegten Schlüsseln zu überlagern.
Warum es auftritt, kann ich Dir nicht genau begründen. Es kann damit zusammenhängen, dass Margins angenzender Elemente laut CSS Spezifikation gegebenenfalls zusammenfallen. http://www.w3.org/TR/CSS21/box.html#collapsing-margins Inwieweit das der IE hier richtig oder falsch interpretiert, ist aber nebensächlich, weil Du das Ganze weit besser lösen kannst, indem Du die Link-Liste auch als HTML-Liste auszeichnest.
...
<html>
<head>
<title>Service</title>
<style type="text/css">
<!--
.link1
{display:block; width:7.5em; height:1.6em;}
.link1:link
{color:#E0DDDD; background-color:#AAA;}
.link1:visited
{color:#808080; background-color:#E0DDDD;}
.link1:hover
{color:#FFF0E1; background-color:#AAA;}
.link1:active
{text-decoration:none; font-weight:bold; color:#00000A; background-color:#FFF0E1;}
ul {margin:0; padding:0; list-stle-type:none; width:7.5em;}
li {margin-bottom:25px;}
-->
</style>
</head>
<body>
<ul>
<li><a href="#" class="link1">Service</a></li>
<li><a href="#" class="link1">Kontakt</a></li>
<li><a href="#" class="link1">Impressum</a></li>
<li><a href="#" class="link1">e-mail</a></li>
<li><a href="#" class="link1">AGB</a></li>
<li><a href="#" class="link1">Startseite</a></li>
</ul>
</body>
</html>
Eventuell schaffst Du es so sogar, dass das UL-Element Dein DIV.box11 vollständig ersetzen kann. Das wäre dann am elegantesten.
viele Grüße
Axel