Viele werden bereits mit diesem Problem gekämpft haben. Eingebundene Flashfilme, liegen trotz z-index und Co über allen anderen Elementen. Während man dem Firefox das mit einigen Kniffen austreiben kann, scheint es bei den Internet Explorern keine Lösung zu geben. - Falsch gedacht.

Die Lösung heisst wmode und muss zwei mal mitgegeben werden. Einmal für die Microsoft Browser (Als param eingegeben) und einmal für den Rest (im embed als Attribut).

 
<object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/jquXcwooV6A&hl=de"></param><param name="wmode" value="transparent"></param>
 
<embed src="http://www.youtube.com/v/jquXcwooV6A&hl=de" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355" wmode="transparent" ></embed></object>
 

Langsam wird es richtig kompliziert. Die Beta-Version des Internet Explorer 8 ist draußen, und kann plötzlich alles Standardtauglich darstellen, aber doch nur irgendwie fast. Einige Webseiten sehen komisch aus, bei anderen passt alles. Welcher Hack funktioniert nun wie, und vor allem wo, und wie kann man den IE8 dazu bringen, alles wie der IE7 zu interpretieren?

Also den Star-Hack kennen die Meisten. Dieser wird nur vom Internet Explorer 6 interpretiert.

 
* html .klasse { }
 

Auch der folgende Hack dürfte weit geläufig sein. Eigentlich wird dieser nur vom Internet-Explorer 7 interpretiert.

 
*+html .klasse { }
 

Doch der Opera interpretiert diesen Hack auch. Allerdings nur, wenn ein XML-Prolog (<?xml version="1.0" ?>) vorhanden ist. In dem Fall baut man das Ganze etwas komplexer auf, und nur der geliebte IE7 liest unseren Hack aus.

 
*:first-child+html .klasse {}
 

Nun kommt aber noch der IE8 hinzu. Glücklicherweise hat Microsoft ein neues meta-Tag eingeführt. Mit diesem kann man dem IE8 sagen, dass er die Seite wie ein IE7 darstellen soll. Über den Sinn und Unsinn dürfen sich andere streiten.

 
<meta http-equiv="X-UA-Compatible" content="IE=7" />
 

Dennoch sollte man nie vergessen, dass jeder Hach mehr Aufwand bedeutet, und wenn möglich vermieden werden sollte.

Wie bekannt sein dürfte kann der IE6 den :hover-Effekt nur bei Links anwenden. Alle andere Elemente ignoriert er. Natürlich gibt es die Möglichkeit Elemente in ein a-Tag hineinzu packen und so anzusprechen. Wenn aber das nicht geht bzw. einfach nicht sinnvoll ist muss man sich mit Javascript aushelfen.

<div onmouseover="this.style.background='yellow'" onmouseout="this..style.background='white'">
Hilfe, ich brauche einen :hover-Effekt!
</div>

Der codeschnipsel tauscht die Hintergrundfarbe aus. Ganz einfach und selbsterklärend. Zukunftsorientierter, eleganter und vor allem besser geht es aber über Klassennamen:

<div onmouseover="this.className='normaleklasse hoverklasse'" onmouseout="this.className='normaleklasse'">
Hilfe, ich brauche einen :hover-Effekt!
</div>

Viel Spaß beim Testen und einsetzen.

Von meiner Kollegin zugeschickt bekommen: Die Internet Explorer Vodoo Puppe

Es soll ja Menschen geben, die bis zum Ende ihrer Tage testen
Bei Tredesoft gibt es auf alle Fälle alle Versionen zum Download. Funktioniert aber leider nicht unter Vista, wer unter Vista testen will findet in einem älteren Beitrag die Lösung