nicht angemeldet
display block funktioniert nicht im IE
Hallo zusammen,
ich habe eine Navigation mit ULs und LIs und display block. Im Firefox klappt das alles wunderbar, doch im IE funktioniert der Hover-Effekt (Änderung der Hintergrundfarbe) nur, wenn man direkt über das Wort fährt. Wenn sich der Mauszeiger im Kasten nebem dem Wort befindet, klappt der Hover-Effekt nicht (was im FF geht).
Kann mir jemand helfen? Danke!
Mfg
Konstantin
***********************************
* {
padding: 0;
margin: 0;
}
#nav {
width: 250px;
margin: 266px 0 0 5px;
font-family: verdana, arial;
position: absolute;
}
#nav a {
display: block;
text-decoration: none;
}
#nav li, ul {
list-style-type: none;
}
#nav .l1 li a {
color: #FFEBCD;
padding: 6px 10px 6px 20px;
background-color: #8B4513;
border-bottom: solid thin #FFFAF0;
margin: 8px 0 0 0;
}
* html #nav .l1 li a {
color: #FFEBCD;
padding: 6px 10px 22px 22px;
background-color: #8B4513;
border-bottom-style: solid;
border-bottom-width: 1pt;
margin: -8px 0 0 0;
}
#nav .l1 a:hover {
text-decoration: underline;
}
#nav .l2 li a {
padding: 3px 5px 3px 30px;
margin: 0px;
background-color: white;
color: #000000;
border-bottom: solid thin #8B4513;
border-right: solid thin #8B4513;
border-left: solid thin #8B4513;
}
* html #nav .l2 li a {
padding: 3px 10px 3px 31px;
margin: -16px 0 0 0;
background-color: white;
color: #000000;
border-bottom: solid 1pt #8B4513;
border-right: solid 1pt #8B4513;
border-left: solid 1pt #8B4513;
}
#nav .l2 li a:hover {
background-color: #F2D5B6;
text-decoration: none;
}
****************************************
<div id="nav">
<ul class="l1">
<li><a href="link1.html" style="border: none;">Link1</a>
<ul class="l2">
<li><a href="link2.html">Link2</a></li>
<li><a href="link3.html">Link3</a></li>
<li><a href="link4.html">Link4</a></li>
</ul>
</li>
<li><a href="link5.html" style="border: none;">Link5</a>
<ul class="l2">
<li><a href="link6.html">Link6</a></li>
<li><a href="link7.html">Link7</a></li>
</ul>
</li>
</ul>
</div>
-
Hallo!
doch im IE funktioniert der Hover-Effekt (Änderung der Hintergrundfarbe) nur, wenn man direkt über das Wort fährt.
Mit welchem IE hast du das getestet? Mit dem 6er, oder? Der IE6 und kleiner kann :hover nur bei Links umsetzen. Du müsstest mit JavaScript nachhelfen. Oder aber einfach die Benutzer des IE6 spüren lassen, dass sie einen alten und schlechten Browser benützen. Bei solchen Dingen wie unwichtigen Hover-Effekten ist das ja nicht ganz so schlimm :)
ciao, ww
--
Schäuble:
"Wir können alles. Außer Rechtsstaat."-
Hi,
mit dem 6er, richtig.
Das ist ja doof. JavaScript kann ich nämlich gar nicht. :-) Leider sagt die Statistik, dass immer noch die Mehrheit den IE 6 benutzen, wenn ich richtig informiert bin... Mmhh... Abschaffen sollte man den. :-)
Gruß,
KonstantinDanke jedenfalls für die Antwort.
Hallo!
doch im IE funktioniert der Hover-Effekt (Änderung der Hintergrundfarbe) nur, wenn man direkt über das Wort fährt.
Mit welchem IE hast du das getestet? Mit dem 6er, oder? Der IE6 und kleiner kann :hover nur bei Links umsetzen. Du müsstest mit JavaScript nachhelfen. Oder aber einfach die Benutzer des IE6 spüren lassen, dass sie einen alten und schlechten Browser benützen. Bei solchen Dingen wie unwichtigen Hover-Effekten ist das ja nicht ganz so schlimm :)
ciao, ww
-
Hallo!
Ich habe jetzt noch ein bisschen rumprobiert und bin auf eine Lösung gekommen. Zumindest in meiner Standalone-Version des 6er IEs klappt es.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Test</title> <style type="text/css"> ~~~~~~css li { width: 200px; } a { background-color: blue; display:block; width: 200px; } a:hover { background-color: yellow; display:block; width: 200px; /* Ohne die Breitenangabe klappt es komischerweise nicht */ } ~~~~~~html </style> </head> <body> <ul> <li> <a href="#"> Text </a> </li> </ul> </body> </html>ciao, ww
--
Schäuble:
"Wir können alles. Außer Rechtsstaat."-
Super! Vielen vielen Dank!
Das hat mir den Abend gerettet ;-)
Gruß
koHallo!
Ich habe jetzt noch ein bisschen rumprobiert und bin auf eine Lösung gekommen. Zumindest in meiner Standalone-Version des 6er IEs klappt es.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">> > li { > width: 200px; > } > a { > background-color: blue; > display:block; > width: 200px; > } > a:hover { > background-color: yellow; > display:block; > width: 200px; /* Ohne die Breitenangabe klappt es komischerweise nicht */ > } ~~~~~~html > > </style> > </head> > > <body> > <ul> > <li> > <a href="#"> > Text > </a> > </li> > </ul> > </body> > </html> > ~~~ > > ciao, ww >
-
-
-
-
Hi,
das Problem hatte ich auch mal, wenn du die border um jeden einzelnen Link komplett schliesst, geht es.
also für
Navi a{ border:1px solid #000;]Grüße,
Engin
GYRO-
Danke, aber das geht bei mir irgendwie nicht.
Ich hab's mit allen möglichen Varianten ausprobiert...
Mfg,
koHi,
das Problem hatte ich auch mal, wenn du die border um jeden einzelnen Link komplett schliesst, geht es.
also für
Navi a{
border:1px solid #000;]> > Grüße, > Engin > GYRO
-
