Verhalten von Links bei display:block und a:hover unter IE6/Win
Katharina
- css
Guten Morgen,
nachdem ich mich gestern volltägig und lösungslos mit dem IE6 und wild bewegten Links beschäftigt habe, hoffe ich auf Euren Beistand. Bislang haben immer das Archiv oder anderweitige Recherche gereicht, in diesem Fall jedoch schwenke ich die weiße Fahne.
Die Problembeschreibung:
Bei IE6/Win (und nur mit diesem Browser) werden die Links im Hauptmenü (linke Spalte) beim Laden der Seite auseinandergezogen. Bei hover springen sie dann in die Position, die sie eigentlich einnehmen sollen. Fährt man dann mit der Maus unten auf der Seite über "Druckversion dieser Seite" werden sowohl die Links im Hauptmenü (links) als auch die Links im Untermenü (rechts) auseinandergezogen.
Der Source-Code:
<html>
<head>
<link rel=stylesheet href="test.css" type ="text/css">
</head>
<body>
<div class="hblau">
<div class="inhalt">
<div class="menue">
<a class="block" href="nix.htm">Das führt zu nichts</a>
<a class="block" href="auchnix.htm">Dies auch nicht</a>
<a class="block" href="garnichts.htm">Dito</a>
<a class="block" href="immernochnichts.htm">Klicken lohnt nicht</a>
</div>
<div class="text">
<p>bla bla</p>
</div>
<div class="men2">
<ul class="men2"><li class="men2"><a class="block1" href="">Weiterere Links zum Thema</a></li>
<li class="men2"><a class="block1" href="">Führen aber auch nirgendwo hin</a></li>
</ul>
</div>
<div class="fuss"><a class="verweis" href="">Druckversion dieser Seite</a> || <a class="verweis" href="#top">Nach oben</a> || <a class="verweis" href="../index.php">Zum Start </a> ||</div>
</div>
</div></body>
</html>
CSS für die Links im Hauptmenü:
a.block{
width:70%;
display:block;
margin:3% 8% 0% 8%;
padding:1% 2% 1% 5%;
text-align:left;
font: 0.7em Arial, Verdana, sans-serif;
font-weight:bold;
text-decoration:none;}
a.block:link{
border-bottom: 1px solid #999999;
border-top: 1px solid #999999;
background-color:#ccccff;
color:#333366;
}
a.block:visited {
border-bottom: 1px solid #999999;
border-top: 1px solid #999999;
background-color:#ccccff;
color:#666666;
}
a.block:hover{
border-bottom: 1px solid #ffffff;
border-top: 1px solid #ffffff;
background-color:#333366;
color:#ffffff;
}
a.block:active {
border-bottom: 1px solid #ffffff;
border-top: 1px solid #ffffff;
background-color:#333366;
color:#ffffff;
}
a.block:focus {
border-bottom: 1px solid #ffffff;
border-top: 1px solid #ffffff;
background-color:#333366;
color:#ffffff;
}
Das Ganze findet Ihr auch unter:
http://home.t-online.de/home/320070999115/Testseite/test.htm
http://home.t-online.de/home/320070999115/Testseite/test.css
Ich würde mir ein immenses Loch in den Bauch freuen, wenn Ihr hier Hilfestellung geben könntet.
Katharina