Problem mit a.menu:hover und transparenten PNGs im IE

freaked

mal wieder zum verzweifeln, vorab der CSS code für mein menü.

Code

.menuimage {
	display:inline;
	vertical-align:middle;
	border:0px;
}
a.menu {
	vertical-align:middle;
	line-height:0px;
	padding:5px;	
	COLOR: #FFFFFF;
	TEXT-DECORATION:none;
	FONT-SIZE:22px;
	font-family: 'Segoe UI', Verdana, Tahoma;
}
a.menu:visited {
	vertical-align:middle;
	line-height:0px;
	padding:5px;
	COLOR: #FFFFFF;
	TEXT-DECORATION:none;
	FONT-SIZE:22px;
	font-family: 'Segoe UI', Verdana, Tahoma;	
}
a.menu:hover {
	vertical-align:middle;
	line-height:0px;
	padding:5px;	
	COLOR: #FFFFFF;
	TEXT-DECORATION:none;
	FONT-SIZE:22px;
	font-family: 'Segoe UI', Verdana, Tahoma;
	background-color:#256CC5;	
}
a.menu:active {
	vertical-align:middle;
	line-height:0px;
	padding:5px;
	COLOR: #8BC1FE;
	TEXT-DECORATION:none;
	FONT-SIZE:22px;
	font-family: 'Segoe UI', Verdana, Tahoma;
	background-color:#256CC5;		
}

Alles anzeigen

weiters der codeausschnitt aus dem menü.

Code

<a href="/index.php" class="menu"><img src="/images/start.png" class="menuimage">Start</a><img src="/images/dividor.png" class="menuimage">

es sollte ja nicht zu viel verlangt sein, dass das auch hinhaut. aber der IE9 spackt rum mit dem hover-effekt, er bleibt oft da, oder spackt mit den transparenten pngs rum:

im fuchs sieht es aus wie es soll, opera auch.

testlink: http://www.freakedenough.at, gelber punkt zeigt jeweils die position der maus

kann mir mal einer erklären wo das problem liegt? im IE10 funzt es einwandfrei >_>, oder wenn ich im ie9 auf dokumentenmodus IE8 oder IE7 schalte

s4ndwichMakeR

Zitat
This is actually cause by the fact that IE does not recognize the :hover psuedo class on non-anchor (<a>) elements unless you use STRICT document type:
Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Quelle: http://stackoverflow.com/questions/5234…xt-of-input-ele

Teste das mal. Das würde mich jetzt auch mal interessieren. Ich hab leider kein Windows-System zum Testen parat.

EDIT: Moment mal, du hast doch Ankerelement ge:hovert. Aber trotzdem finde ich merkwürdig, dass meine Recherche so oft beim verwendeten Doctype landet. Liegt’s tatsächlich an HTML5? o_O

**winfreak**

Das sieht ja richtig schlimm im IE aus. Probier aber mal das oben Genannte.

freaked

ich änder sicher nicht schon wieder den doctype, das ist ja echt schon lächerlich, dass der für sowas zu blöd sein soll? wo ist da die beauty of the web?

mrshadowtux

Der IE hat sich noch nie richtig an Webstandards gehalten. Sieht man auch daran, dass die anderen es richtig hinbekommen.
Schade, dachte eigentlich, dass der 10er das mal hinbekommt.

**winfreak**

Zitat von mrshadowtux

Der IE hat sich noch nie richtig an Webstandards gehalten. Sieht man auch daran, dass die anderen es richtig hinbekommen.
Schade, dachte eigentlich, dass der 10er das mal hinbekommt.

Er testet ja auch im 9er

freaked

der 10er kanns ja. der 9er im 8er kompatibimodus ja auch, nur im ie9 modus nicht (f12 entwicklertools)

**winfreak**

Zitat von freaked

der 10er kanns ja. der 9er im 8er kompatibimodus ja auch, nur im ie9 modus nicht (f12 entwicklertools)

Was zum Teufel? Jetzt wird's aber kurios.
EDIT: Mal was anderes...

Bau doch das ganze UM!
Mach den Link als BLOCK Element und nimm die komplette Grafik als Hintergrund. dann sollte das auch klappen.

mrshadowtux

Also DAS kann ich mir beim besten Willen nicht vorstellen, da ist irgendwas nicht in Ordnung.

**winfreak**

Zitat von mrshadowtux

Also DAS kann ich mir beim besten Willen nicht vorstellen, da ist irgendwas nicht in Ordnung.

Kann das ganze aber so nachvollziehen.
Bei mir ist es im 9er so, wie er beschreibt.

mrshadowtux

Sehr seltsam. Denn beim 9er war die Unterstüzung von Webstandards ja schon etwas besser als beim 8er.

s4ndwichMakeR

Zitat von freaked

ich änder sicher nicht schon wieder den doctype, das ist ja echt schon lächerlich, dass der für sowas zu blöd sein soll? wo ist da die beauty of the web?

Ich hab ja auch nicht gesagt, dass es mir gefällt. Aber scheinbar machen die IEs oder zumindest der Neuner da einen gewissen Brei drum.

Ich kann mir nur schwer vorstellen, dass der HTML-Doctype einen Einfluss darauf hat, wie der Stylesheet angewandt wird, aber der IE scheint ja zu allem fähig zu sein, also teste es halt mal!

… und noch was: Die Reihenfolge der CSS-Definitionen spielt auch eine Rolle. Zumindest erinnere ich mich an komisches Verhalten bei Pseudoklassen aufgrund der Reihenfolge.

niwax

Zitat von s4ndwichMakeR

Ich hab ja auch nicht gesagt, dass es mir gefällt. Aber scheinbar machen die IEs oder zumindest der Neuner da einen gewissen Brei drum.
Ich kann mir nur schwer vorstellen, dass der HTML-Doctype einen Einfluss darauf hat, wie der Stylesheet angewandt wird, aber der IE scheint ja zu allem fähig zu sein, also teste es halt mal!

Ein wesentliches Problem ist nicht der aktuelle IE, sondern dass er Kompatibilität mit den älteren Versionen gewährleisten muss. Und da kann es sein, dass im Strit-Modus tatsächlich Standardkonform gerendert wird, während die anderen Modi unsauberheiten aus alten Versionen noch zulassen müssen. Ich nehme meistens XHTML Transitional. Das ist neu genug, um sauber angezeigt zu werden und lässtin den gängigen Browsern HTML5-Elemente zu.

mrshadowtux

Dann soll Microsoft diese Komaptibilität mal rauswerfen, ist ja grausam.

s4ndwichMakeR

Ja, wenn ein Browser einen »Kompatibilätsmodus« braucht, stimmt da was grundsätzlich nicht.

freaked

Btw im ie9 mobile gibts mangels hover keine Probleme dafür klatscht er das untere Menü genau in die seitenmitte..

mrshadowtux

Zitat von s4ndwichMakeR

Ja, wenn ein Browser einen »Kompatibilätsmodus« braucht, stimmt da was grundsätzlich nicht.

Jap

freaked

http://www.retrospace.net/infoseiten/read.php?id=7
falls mal jemand interessiert wie man das position:fixed;bottom:0px problem gefixt bekommt, sodass am WP nicht der footer in der seitenmitte landet

Problem mit a.menu:hover und transparenten PNGs im IE

Jetzt mitmachen!

Benutzer online in diesem Thema