[CSS] Mouseover im IE

B

blu

antiheldIn
ID: 134987
L
14 Mai 2006
90
16
Hi.

Ich stehe momentan etwas auf dem Schlauch, weil ich mir nicht erklären kann, warum der IE beim CSSbasiertem Mouseover ein Problem draus macht und nur die a.active-Datei läd.

Ausschnitt:
HTML: 
#menu {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#menu li {
text-align:right;
}

#start {
	background-image: url(start.gif);
	border-bottom: 1px solid #323232;
	width: 309px;
	height: 66px;
	font-family: verdana, arial, helvetica, sans-serif;
	color: #ADADAD;
	font-size: 8pt;
}

#start:hover, #start:active, #start:focus, #start_active {
	background-image: url(start_active.gif);
	width: 309px;
	height: 66px;
}

HTML: 
<ul id="menu">
<li id="start">
<a href="index6.htm" id="start_active"><div style="padding-top: 27px; padding-right: 20px;">.Startseite</div></a>
</li></ul>

Im Firefox wird es so wie es soll angezeigt..
Hat da einer eine Idee?
 
blu schrieb:
[...]weil ich mir nicht erklären kann, warum der IE beim CSSbasiertem Mouseover ein Problem draus macht [...]
Zum Vergrößern anklicken....
Der IE hat ein Problem mit den Pseudoklassen, wenn sie nicht für das a-Tag sind.
:focus und :hover gelten auch für andere Elemente als Verweise. Wenn Sie beispielsweise für h1:focus CSS-Eigenschaften definieren und dann mit der Maus auf eine h1-Überschrift klicken, nimmt diese, solange die Maustaste gedrückt wird die definierten Eigenschaften an. Im Internet Explorer funktioniert dies jedoch nicht.
Zum Vergrößern anklicken....
Quelle: https://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active

Entweder du machst für den IE ein JavaScript, was den Hover-Effekt macht und du lässt IE-User eben in die Röhre gucken.
 
Hi!

Das "Bild", den IE-Nutzer in die Röhre gucken zu lassen, gefällt mir viel eher. :biggrin:
Bin kein Fan von JavaScript, zumal ich es ja dann nur für den IE und ähnlich aufgebaute Browser mache, deren Nutzer dann womöglich auch noch JavaScript deaktiviert haben.. och nö.

Firefox
Noch eine andere Frage, zum "aktivierten" Bild.
Ich möchte jenes Bild, durch welches ich gerade auf eine bestimmte Seite gekommen bin, auch quasi aktiviert lassen. Bis ich auf einen anderen Menü-Punkt drücke, welcher dann wieder aktiviert ist, also mit zB. "start_active.gif" angezeigt wird.
Wie mach ich das?
 
blu schrieb:
Das "Bild", den IE-Nutzer in die Röhre gucken zu lassen, gefällt mir viel eher. :biggrin:
Zum Vergrößern anklicken....
Guck mal auf meine Webseite. Ich hab das "Bild" wörtlich genommen. Aber bitte mit IE draufgehen, sonst is der Fun-Faktor weg :ugly:
blu schrieb:
Ich möchte jenes Bild, durch welches ich gerade auf eine bestimmte Seite gekommen bin, auch quasi aktiviert lassen. Bis ich auf einen anderen Menü-Punkt drücke, welcher dann wieder aktiviert ist, also mit zB. "start_active.gif" angezeigt wird.
Wie mach ich das?
Zum Vergrößern anklicken....
Versteh ich richtig: Du hast ein Menü und möchtest den Punkt, auf der Seite, wo du grade bist auch mit dem Hover-Style versehen ?

Wenn ja, musst du das wohl serverseitig machen und dem entsprechenden Link eben diese CSS-Klasse (wenn du mehrere Links hast, darfst du nicht id und # nutzen, sondern class und .) zuweisen.
Alternative wäre JavaScript, dass du ja a) nicht willst und b) wegen der Deaktivierbarkeit durch den Clienten wohl nicht sehr effizent sein wird.
 
blu schrieb:
Noch eine andere Frage, zum "aktivierten" Bild.
Ich möchte jenes Bild, durch welches ich gerade auf eine bestimmte Seite gekommen bin, auch quasi aktiviert lassen. Bis ich auf einen anderen Menü-Punkt drücke, welcher dann wieder aktiviert ist, also mit zB. "start_active.gif" angezeigt wird.
Wie mach ich das?
Zum Vergrößern anklicken....

Meinst Du es in etwa so wie dass Menü auf meiner Seite?

Grüße
 
theHacker schrieb:
Guck mal auf meine Webseite. Ich hab das "Bild" wörtlich genommen. Aber bitte mit IE draufgehen, sonst is der Fun-Faktor weg
Zum Vergrößern anklicken....
a030.gif


@masterschenk
Ja.
Wie hast du den Mousovereffekt auch im IE bewerkstelligt?
 
Zuletzt bearbeitet:
HTML: 
<img src="normalespic.jpg" onMouseOver="this.src = 'anderespic.jpg'" onMouseOut="this.src = 'normalespic.jpg'">
voila ;)

ok, is zwar nich css, aber funktioniert auch im IE ;)

x3ntar
 
Danke, ist aber wirklich nicht das, was ich suche.

So wie es masterschenk hat, ist es, wie ich es mir vorstelle. Allerdings noch mit dem erwähnten Hover-Style. Ist bei ihm anders geregelt..
 
Nun.. so kompliziert will ich es mir gar nicht machen. Es ist ja nicht so wild.

Allerdings habe ich nochmal eine Frage zum erwähnten Hover.

So siehts aus:
HTML: 
a.test6aktiv {
   background-image: url(test6_active.gif);
   text-decoration: none;
   font-weight: bold; }

So der Link:
HTML: 
<li id="test6"><a href="index6.htm" class="test6aktiv"><div style="padding-top: 27px; padding-right: 20px;">.test6</div></a></li>

Wieso klappt das nicht? Ich habe dem doch nun die Klasse zugewiesen.


Nachtrag: Habs via PHP geregelt. Wenn es noch eine andere Möglichkeit gäbe, könnt ihr euch ja melden.
 
Zuletzt bearbeitet:
Ist jetzt nicht mehr so wichtig, allerdings habe ich ein ähnliches Problem, etwas abgewandelt.

Ich will einen ganz normalen Mouseover mit CSS machen:

Code: 
a.bild:link, a.bild:visited
	{
	background-image: url(bilder/mieztrans.jpg);
	width: 150px;
	height: 150px;
	}
a.bild:hover{
	background-image: url(bilder/miez.jpg);
	width: 150px;
	height: 150px;
	}

.invisible {
	visibility: hidden;
        }

Code: 
<a href="" class="bild"><span class="invisible">test</span></a>


Das klappt soweit auch im IE, der Firefox aber macht diesen Mouseover nur in der Größe von dem Text "test" in dem Link-Tag..
Er verarbeitet die angegebene Größe in der Klasse "bild" nicht..

Hat da wer einen Trick?
 
blu schrieb:
der Firefox aber macht diesen Mouseover nur in der Größe von dem Text "test" in dem Link-Tag..
Er verarbeitet die angegebene Größe in der Klasse "bild" nicht..

Hat da wer einen Trick?
Zum Vergrößern anklicken....
Das liegt daran, dass FF den Link nicht mehr strecken kann, als er tatsächlich Platz benötigt. Willst du das a-Tag auf die angegebene Größe bringen, musst du auch irgendwas reintun, was diesen Platz auch wirklich benötigt.

Alternativ, in diesem Fall einfacher, stell das a-Tag auf "display: block;" um, das müsste - ungetestet - funktionieren. Es verhält sich dann wie ein Div-Container und blockiert auch wirklich die angegebene Größe.
 
Die eleganteste Lösung, die auch in jedem Fall mit egal welchen Inhalten funktioniert, ist die, eine Browserweiche zu nutzen, die nur der IE versteht.

Erstmal ist es wichtig zu wissen, daß du bestimmte Inhalte im IE in eine Tabelle packen musst innerhalb des a-Tags, damit auch alles korrekt funktioniert, wenn es das nicht tut.

Ich gebe dir ein Beispiel aus einer realen Seite:
HTML: 
...
<li class="main"><a class="hide" href="/spp/paid4.html"><img src="/images/b_paid4.gif" width="140" height="50"  border="0"></a>

      <!--[if lte IE 6]>
        <a href="/spp/paid4.html"><img src="/images/b_paid4.gif" width="140" height="50"  border="0">
        <table class="notable"><tr><td>
      <![endif]-->
      <ul class="sub_left">
        <li><a href="/spp/p_paid4_banner.html">Paid4-Banner</a></li>
      </ul>

      <!--[if lte IE 6]>
      </td></tr></table>
      </a>
      <![endif]-->
    </li>
...

Achte auf die Kommentare die "if lte IE 6" in eckigen Klammern enthalten. Das ist eine spezieller Kommentar, den der IE so versteht, daß er was anzeigen soll, während jeder andere Browser das als Kommentar handhabt.

Das obige :hover-Beispiel wird dazu benutzt, ein Untermenü anzuzeigen. Die Klasse "class=hide" ist im IE so definiert, daß es diesen Inhalt ausblendet. So hast du eine Implementierung für den IE und eine für alle anderen Browser und alles ohne Javascript. Die volle Implementierung inkl. CSS kannst du auf losetrommel.de sehen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben