CSS: li:hover auch für WIN-IE???

Diskutiere mit über: CSS: li:hover auch für WIN-IE??? im Web Page Design Forum

  1. Katrin

    Katrin Thread Starter MacUser Mitglied

    Beiträge:
    326
    Zustimmungen:
    3
    Registriert seit:
    12.07.2002
    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:
    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
     
  2. moses_78

    moses_78 MacUser Mitglied

    Beiträge:
    1.322
    Zustimmungen:
    22
    Registriert seit:
    08.04.2005
    Für diese große Schwäche des IEs gibts den Javascriptbasierten
    .htc-Hack.

    HTH, Mathias.
     
  3. ThaHammer

    ThaHammer MacUser Mitglied

    Beiträge:
    3.276
    Zustimmungen:
    13
    Registriert seit:
    01.06.2004
    Mach den hover über den a Tag nicht über die Listenelemente, das kann der IE nämlich auch.
     
  4. Katrin

    Katrin Thread Starter MacUser Mitglied

    Beiträge:
    326
    Zustimmungen:
    3
    Registriert seit:
    12.07.2002
    Aber das a-Tag muss doch auch über "li" angesprochen werden? --> "li a:hover"? Oder würde ein "#navi a:hover" hier reichen? Ich weiß immer nicht, ob ich alle DIVs aufzählen muss: "#content #nav-area #navi a:hover" :rolleyes:

    @Mathias: Vielen Dank, da muss ich mich mal reinfinden. Ist das CSS dann auch noch standardkonform?
    Edit: Ist es offenbar nicht: "Die Eigenschaft behavior existiert nicht : url(/assets/src/csshover.htc)" (W3C)
    Da würde ich wohl lieber in Kauf nehmen, dass die IE-Nutzer dieses Designfeature eben nicht sehen können.

    PS: Das Nichtfunktionieren der :active-Eigenschaft ist auch noch so ein Problem :rolleyes:
     
  5. ThaHammer

    ThaHammer MacUser Mitglied

    Beiträge:
    3.276
    Zustimmungen:
    13
    Registriert seit:
    01.06.2004
    Probiere mal bei Deinem css einfach die li Elemente wegzulassen. Das sollte eigentlich gehen. Bei meiner aktuellen seite http://www.Mu-La.info habe ich komplett auf ol und li verzichtet. Stattdessen nehme ich nur ein Div und schreibe da die a Tags rein. Wenn das Div nicht zu breit ist, rutschen die a Tags automatisch untereinander.
     
  6. Katrin

    Katrin Thread Starter MacUser Mitglied

    Beiträge:
    326
    Zustimmungen:
    3
    Registriert seit:
    12.07.2002
    Hmm, wenns gar nicht mehr anders geht, wäre das noch ne Notlösung. Eigentlich will ich mein Markup so logisch und korrekt wie möglich aufbauen. Oder meinst du das anders: Trotzdem die Liste im HTML benutzen, jedoch im CSS nur die entsprechenden "a" statt der "li" zu stylen?

    Ja. Zur Not muss eben ein "display: block" ran" :)
     
  7. ThaHammer

    ThaHammer MacUser Mitglied

    Beiträge:
    3.276
    Zustimmungen:
    13
    Registriert seit:
    01.06.2004
    Du kannst die li stehen lassen oder rausnehmen, macht nicht den grossen Unterschied. Es geht ja nur darum das der IE den Hover Effekt mit den a Tags kann.
     
  8. moses_78

    moses_78 MacUser Mitglied

    Beiträge:
    1.322
    Zustimmungen:
    22
    Registriert seit:
    08.04.2005
    Evtl könntest du den Abschnitt mit der Behaviour auch in Conditional
    Comments packen.
     
Die Seite wird geladen...
Ähnliche Themen - CSS hover WIN Forum Datum
Probleme mit Hover und Positionierung der Navigation /CSS Web Page Design 19.06.2011
CSS-Hover-Effekt nicht zuverlässig unter Safari Web Page Design 16.08.2010
CSS: ein Hover-Problem Web Page Design 12.02.2008
CSS: "visited" und "hover" Problem Web Page Design 10.10.2006
CSS :hover auf tr tags - nicht mit IE Web Page Design 25.07.2006

Diese Seite empfehlen

Benutzerdefinierte Suche