Katrin
Aktives Mitglied
Thread Starter
- Dabei seit
- 12.07.2002
- Beiträge
- 326
- Reaktionspunkte
- 3
Hallo,
ich quäle mich derzeit mit einem scheinbar banalen Problem:
Für eine Navigationsleiste (ul) möchte ich beim Mouseover ein kleines Hintergrundbild einblenden. Alles soweit kein Thema, nur im WIN-IE (ich kann hier nur Version 6 testen) klappts mal wieder nicht.
Hier das HTML:
Und hier das CSS (nur listenrelevanter Teil):
Da das Hintergrundbild weder mit "li:hover" noch "li a:hover" funktioniert, habe ich versucht, das Linkelement mit Hilfe der umgebenden DIVs anzusprechen. Entweder mit "#navi li:hover a" oder "#content #nav-area #navi li a:hover" - geht alles nicht. Habe ich hier nen Denkfehler? Oder ist ein Mouseover-Hintergrundbild für WIN-IE einfach unmöglich?
PS: Auch mit der a:active-Eigenschaft habe ich ein Problem. Selbst "font-weight" wird hier nicht korrekt dargestellt. Und das in allen Browsern. Wo liegt der Fehler?
Katrin
ich quäle mich derzeit mit einem scheinbar banalen Problem:
Für eine Navigationsleiste (ul) möchte ich beim Mouseover ein kleines Hintergrundbild einblenden. Alles soweit kein Thema, nur im WIN-IE (ich kann hier nur Version 6 testen) klappts mal wieder nicht.
Hier das HTML:
HTML:
<body>
<div id="content">
<div id="nav-area">
<div id="navi">
<ul>
<li><a href="links.html">Links</a></li>
<li><a href="kontakt.html">Kontakt</a></li>
<li><a href="impressum.html">Impressum</a></li>
</ul>
</div>
</div>
</div>
</body>Und hier das CSS (nur listenrelevanter Teil):
Code:
ul {
position : absolute;
top : 3em;
left : 2.9em;
list-style-type : none;
}
li {
width : 13.6em;
height : 4.4em;
border-bottom : 1px solid #e3e3d7;
text-indent : 42px;
text-transform : uppercase;
font-size : 1.1em;
font-weight : normal;
}
li a, li a:link {
text-decoration : none;
background-color : white;
color : #969285;
vertical-align : -1.5em;
font-weight : normal;
}
li a:visited {
text-decoration : none;
background-color : white;
color : #969285;
vertical-align : -1.5em;
font-weight : normal;
}
li a:hover {
background-color : white;
color : #b0c399;
font-weight : normal;
}
#navi li:hover, #navi li:hover a {
background : url(media/bullet.gif) no-repeat left top;
vertical-align : -1.5em;
text-decoration : none;
font-weight : normal;
}
li a:active {
background : url(media/bullet-a.gif) no-repeat left top;
font-weight : bold;
}Da das Hintergrundbild weder mit "li:hover" noch "li a:hover" funktioniert, habe ich versucht, das Linkelement mit Hilfe der umgebenden DIVs anzusprechen. Entweder mit "#navi li:hover a" oder "#content #nav-area #navi li a:hover" - geht alles nicht. Habe ich hier nen Denkfehler? Oder ist ein Mouseover-Hintergrundbild für WIN-IE einfach unmöglich?
PS: Auch mit der a:active-Eigenschaft habe ich ein Problem. Selbst "font-weight" wird hier nicht korrekt dargestellt. Und das in allen Browsern. Wo liegt der Fehler?
Katrin
