Hinweis: Am 9. April beteiligen wir uns auf webkrauts.de am Naked CSS Day. Die Stylesheets sind an diesem Tag absichtlich abgeschaltet.

Webkrauts Logo

Webkrauts Webkrauts Schriftzug

- für mehr Qualität im Web

„Da ist was im Weg“: Browserinterne Hierarchien

Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden.

„Da ist was im Weg“: Browserinterne Hierarchien

Wer hat sich nicht schon einmal gewundert oder geärgert, daß ein Flashelement oder ein Formularelement einem Pulldownmenü im Wege war? Jens Grochtdreis nimmt sich der Hintergründe an.

Beliebte Elemente einer Webseite sind Pulldownmenüs. Richtig gemacht können sie durchaus einen Nutzwert darstellen. Man sollte hierbei aber auf Details achten, genau wie bei der Nutzung von Lightboxen.

Jeder Browser hat eine eigene Objekthierarchie für die Elemente einer Webseite. Multimedialemente und Formularelemente spielen darin eine Sonderrolle. Diese Besonderheiten haben zur Folge, daß es entweder schwer oder gar nicht möglich ist, ein Element über einen Flashfilm oder ein Formularelement zu legen.

Der IE6 und die Selectbox

Der Internet Explorer 6 verweigert leider jeglichen Versuch, über Selectboxen irgendein Element zu legen. Ein Pulldownmenü würde also immer unter einer Selectbox liegen. Das sollte bei der Planung einer Seite so lange berücksichtigt werden, wie wir uns noch Gedanken über diesen Uralt-Browser machen müssen. Weder sind andere Browser noch andere Formularelemente betroffen.

Bei Flashelementen verhält sich das Problem ein wenig anders. Nur durch ein bestimmtes Attribut kann man dafür sorgen, daß ein Flashelement verdeckt wird. Dies funtkioniert dann auch browserübergreifend. Die „Zauberformel“ lautet: <param value="transparent" name="wmode"/>. Der Attributwert kann auch „opaque“ anstatt „transparent“ lauten.

Doch leider hat diese Lösung zwei Haken: sie funktioniert nicht unter Linux (auch nicht im Firefox) und sie führt dazu, daß der Flashfilm nicht mehr per Tastatur erreichbar ist und demnach für viele assistive Technologien versteckt wird.

Man sollte also seine Seite und die verwendeten Elemente und Navigationsarten auch unter diesem Aspekt gut planen.

Beispiele

Zwei Beispieldateien für das Formularproblem und für das Flashproblem sollen den Sachverhalt verdeutlichen.

Kommentare

Ruben
am 09.12.2007 - 11:21

Der Link zu den Lightboxen hätte noch gerne ein http:// ...

Permanenter Link

Jens Grochtdreis
am 09.12.2007 - 11:31

Stimmt. Ich habe es korrigiert. Danke für den Hinweis.

Permanenter Link

Carsten Witt
am 09.12.2007 - 12:58

Moin, Danke für diese Tips!
btw - ich will nicht klugscheißen, aber der Lightboxen-Link scheint nur mit "www" zu funktionieren.

Schönen 2. Advent!

Permanenter Link

soophie
am 09.12.2007 - 14:03

Hieße das im Falle von Flash, dass man entweder Navigation per Tastatur oder wmode=transparent anwenden kann? Is ja plöd, wenn man Beides braucht.

Permanenter Link

Torsten
am 11.12.2007 - 12:58

Um das Select-Box-Problem im IE6 zu umgehen, kann man auch einen I-Frame als »Unterlage« für das überlagernde Element nutzen. Entweder hartcodet oder per JavaScript dynamisch hinzugefügt (z.B. BGiframe-Plugin für jQuery).

Permanenter Link

Jens Grochtdreis
am 11.12.2007 - 14:01

@Torsten: Das stimmt. Diese Lösung geht, aber sie ist alles andere als charmant, semantisch korrekt oder logisch. Sie taugt dann als Notlösung, wenn man vorher nicht geplant hat oder der Kunde sich partout nicht von der Realität beeindrucken lassen wollte. Aber empfehlenswert finde ich die Lösung nicht.

Permanenter Link

Die Kommentare sind geschlossen.