CSS hover IE: kleines Prob mit ":visited"

KungFuZius · #1 (**permalink**) 08.05.2007, 19:04

Hallo,

bevor ihr weiterlest: nein, es hat nichts mit der Technik an sich zu tun. Nur eine kleine Einfärbungsfrage.

Ich habe mir ein hover dropdown menue gebastelt, was auch im IE 6 funzt (mithilfe von Stu Nichols). Aber ich habe jetzt das Problem, dass sobald ich die hintergrundfarbe von a:visited angebe, das hover nicht mehr funktioniert.

der dafür verantwortliche code:

Code:

.menu ul li a:visited {
	display:block;
	overflow:hidden;
	border:none;
}

Ich muss aber die hintergrundfarbe von visited ändern (standard ist ja so ein ekeliges lila

)

danke schonmal im voraus.

Gruß
KungFuZius

Peter Klein · #2 (**permalink**) 08.05.2007, 19:33

Ich würde sagen schick mal den ganzen Code rüber, vllt liegt der Fehler ja in nem anderen teil.

Ohne den Code kann man dir eher weniger helfen.

KungFuZius · #3 (**permalink**) 08.05.2007, 19:48

kannst den ganzen code haben fürs menue:

Code:

.menu {
	font-family: arial, sans-serif;
	height: 25px;
	position:relative;
	padding-left:2em;
	padding-right:2em;
	margin-top:-25px; 
	font-size:11px; 
	z-index:100;
	color:#CAD4E0;
	background-color:#CAD4E0;
}

.menu ul li a  {
	display:block;
	overflow:hidden;
	border:none;
}

.menu ul li a:visited {
	display:block;
	overflow:hidden;
  /* Wenn ich an dieser stelle die hintergrundfarbe aendere, funktioniert
      das :hover nicht mehr */
	border:none;
}


.menu ul {
	padding:0; 
	margin:0;
	list-style-type: none; 
}
.menu ul li {
	float:left;
	/*margin-right:1px; */
	position:relative;
	color:#CAD4E0;
	background-color:#CAD4E0;
}
.menu ul li ul {
	display: none;
	border:2px solid #CAD4E0;
	padding-top:6 px;
	color:#CAD4E0;
	background-color:#CAD4E0;
}

.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}

.menu ul li a:hover {color:#CAD4E0; background-color:#CAD4E0;}
.menu ul li a:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
.menu ul li a:hover ul li a {display:block; background:#CAD4E0; color:#CAD4E0;}
.menu ul li a:hover ul li a ul {visibility:hidden;}

und der xhtml code dazu:

Code:

<div class="menu">
			<ul>
				<li><a href="index.html"><img src="listitems/aktuell.gif" width="77px" height="20px" alt="Aktuell"/></a>
				  </li>
				  <li><a href="bio.html"><img src="listitems/biographie.gif" width="107px" height="20px" alt="Biographie"/></a>
				  </li>

				<li><a href="komponist.html" class="hide"><img src="listitems/komponist.gif" width="106px" height="20px" alt="Komponist"/></a>

				<!--[if lte IE 6]>
				<a href="komponist.html"><img src="listitems/komponist.gif" width="106px" height="20px" alt="Komponist"/>
				<table><tr><td>
				<![endif]-->
				
					<ul>
					<li><a href="komp_philosophie.html">
					<img class="untermenue" src="listitems/philosophie.gif" width="148px" height="15px" alt="Philosophie"/></a></li>
					<li><a href="komp_noten.html">
					<img class="untermenue" src="listitems/noten.gif" width="148px" height="15px" alt="Noten"/></a></li>
					<li><a href="komp_klangeindruck.html">
					<img class="untermenue" src="listitems/klangeindruck.gif" width="148px" height="15px" alt="Klangeindruck"/></a></li>
					</ul>
				
				<!--[if lte IE 6]>
				</td></tr></table>
				</a>
				<![endif]-->

				</li>
				
				<li><a href="dirigent.html" class="hide"><img src="listitems/dirigent.gif" width="84px" height="20px" alt="Dirigent"/></a>

				<!--[if lte IE 6]>
				<a href="dirigent.html"><img src="listitems/dirigent.gif" width="84px" height="20px" alt="Dirigent"/>
				<table><tr><td>
				<![endif]-->
				
					<ul>
					<li><a href="diri_video.html"><img class="untermenue" src="listitems/video.gif" width="67px" height="15px" alt="Video"/></a></li>
				        <li><a href="diri_audio.html"><img class="untermenue" src="listitems/audio.gif" width="67px" height="15px" alt="Audio"/></a></li>
					</ul>
				
				<!--[if lte IE 6]>
				</td></tr></table>
				</a>
				<![endif]-->

				</li>
				
				<li><a href="pianist.html" class="hide"><img src="listitems/pianist.gif" width="72px" height="20px" alt="pianist"/></a>

				<!--[if lte IE 6]>
				<a href="pianist.html"><img src="listitems/pianist.gif" width="72px" height="20px" alt="pianist"/>
				<table><tr><td>
				<![endif]-->
				
					<ul>
					<li><a href="pia_unterricht.html">
					<img class="untermenue" src="listitems/unterricht.gif" width="106px" height="15px" alt="Unterricht"/></a></li>
					</ul>
				
				<!--[if lte IE 6]>
				</td></tr></table>
				</a>
				<![endif]-->

				</li>
				<li><a href="kontakt.html"><img src="listitems/kontakt.gif" width="84px" height="20px" alt="Kontakt"/></a>
				 </li>
				 <li><a href="links.html"><img src="listitems/links.gif" width="59px" height="20px" alt="Links"/></a>
				 </li>
			</ul>

			</div>

IChao · #4 (**permalink**) 08.05.2007, 20:48

Wenn ich dein XHTML-Ausschnitt in ein XHTML-Skelett einfüge, und das CSS hinzusetze, sehe ich einen himmelblauen Balken im Fx, sonst nichts. Die Bilder fehlen. Hast du die Hinweise zu diesem Forum gelesen?

KungFuZius · #5 (**permalink**) 09.05.2007, 15:16

natürlich können die grafiken nicht geladen werden...
darum geht es ja auch gar nicht. Es geht nur um die tatsache, dass wenn ich die hintergrundfarbe angebe, das hover im _IE_ nicht funktioniert. sowieso funktioniert das stylesheet nur für den IE 6 oder kleiner. für den firefox lade ich ein anderes stylesheet.

mfg
KungFuZius

IChao · #6 (**permalink**) 09.05.2007, 16:00

Ach so, natürlich.

Nun, wenn ich den obigen code in ein XHTML Grundgerüst einsetze, und dem :visited für dich auch noch eine background-color:red; zuordne, und mir das Ganze dann im IE6 angucke, sehe ich ohne deine Bildchen Folgendes:

Ich wähle zwei Links an, damit sie besucht sind. Sie werden rot. Siehe erste angehängte Grafik (du musst eingeloggt sein). Dann hovere ich über den ersten Link und es klappt ein Untermenü aus. Siehe zweites Bild. Schön. Aber wo war jetzt das beschriebene Problem? Edit: was genau meinst du wiederholt damit, dass das "hover im _IE_ nicht funktioniert."?

Wenn du die Hinweise gelesen und verstanden hättest, wäre dir klar geworden, dass das Alles hier ohne einen LINK bloß Zeitverschwendung ist.

Nachdem ich die ganze Bastelarbeit verrichtet habe, um dir dies zu zeigen, könntest du bitte mal frei von der Leber weg schildern, warum du trotz Aufforderung die Hinweise nicht beachtest?

KungFuZius · #7 (**permalink**) 09.05.2007, 16:14

Hallo,

ich habe das jetzt mal auf den webspace hochgeladen:
home - Michael Ostrzyga

auf dem webserver funktionierte es direkt (das hover, auch nachdem die links visited waren).
dann habe ichs nochmal lokal getestet und es funktionierte auch. ich schätze dass es irgendwo am cache des IE gelegen haben muss.

zur frage, wieso ich die hinweise nicht "beachtet" habe:
ich bin davon ausgegangen, dass es nicht nötig sei, den code zu testen, weil ich nur einen kleinen denkfehler gemacht habe und jemand die antwort parat hat.

ich werde nochmal ein bisschen experimentieren, und schildern woran es genau lag. bis dahin danke für die hilfe und sorry für die umstände.

mfg
KungFuZius

IChao · #8 (**permalink**) 09.05.2007, 16:31

Vielen Dank für deine Antwort.

Das hatte ich bei der Formulierung der Hinweise überhaupt nicht bedacht. Es gibt Fälle, in denen dem Fragenden das Problem selbst so trivial erscheint, dass er sich gar nicht erst die Mühe macht, etwas groß mit Code und URL zu belegen, da er voraussetzt, andere würden das eh im Schlaf beantworten können.

Das müssen wir bei der Ergänzung der Hinweise beachten. Oft sind es gerade diese vermeintlich "einfachen Fälle", die einen langen Rattenschwanz an Unwägbarkeiten hinterherziehen.

Im Prinzip hätten wir hier neben deiner URL auch noch die URL des Originalmenüs von Stu benötigt (etwa: welches der Tausend meinst du denn?), und dann noch die exakte Beschreibung, was das heißt: "hover funktioniert nicht".

Danke nochmal.

KungFuZius · #9 (**permalink**) 09.05.2007, 19:11

ich konnte das problem bisher nicht rekonstruieren, aber
ich habe nun ein weiteres problem, diesmal mit dem IE 7.
ich kann den 3. untermenuepunkt nicht erreichen (tritt nur auf unter komponist), obwohl er angezeigt wird. bevor ich aber den menuepunkt mit der maus erreiche, klappt das menue wieder zu. der link in meinem vorigen post führt zum problem

vielen dank schonmal im voraus

IChao · #10 (**permalink**) 09.05.2007, 20:05

position:relative in img.untermenue scheint zu helfen. Nur kurz im IE7 angetestet, keine Zeit.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Hilfe] Wordpress Css Bilder Hover	Seigetzu	CSS	3	06.11.2010 12:48
bildwechsel bei hover - nur mit css, ohne javascript?	Beb	CSS	3	20.06.2005 07:48
css tooltip hover problem	Deude	CSS	2	15.05.2005 17:49
CSS: hover bei Links	RayBan	CSS	2	05.11.2004 22:26
iexplorer 6.0 / mozilla 1.6 css hover problem	titze	CSS	4	15.08.2004 11:31