<ul> :hover im Internetexplorer

[Michel Beischer]

Hallo,

Ich bin gerade in der Ausbildung zum IT-Kaufmann und arbeite im Moment daran eine Internetseite möglichst Barrierefrei umzugestalten.

Eine Tabellen Navigation scheidet, wie ich mitbekommen habe, ja nun vollkommen aus, weswegen ich nun alles mit CSS gestalte.

Die Navigation, welche ich gestaltet habe besteht aus einer Liste mit mehreren Unterpunkten, die beim überrollen der ul li Elemente "aufklappen" sollen. Der Code, den ich dafür geschrieben habe ist folgender:

.navigation_menu {font-family: Arial;
      margin: 0 auto;
      list-style:none;
      width: 150px;
      border-bottom:1px solid #D0D9F4;}

ul li   {position: relative; right:40px;}

li ul   {position: absolute;
      left: 149;
      top: 0;
      display: none;
      font-family: Arial;}

#menu_link   {display: block;
      font-family: Verdana,Tahoma,Arial,sans-serif;
      font-size: 10pt;
      font-weight: bold;
      text-decoration: none;
      color: #001E6A;
      background: #ECF1FE;
      padding: 5px;
      border-left: 3px solid #A0B3EA;
      border-top: 1px solid #D0D9F4;
      border-right: 1px solid #D0D9F4;}

#menu_link_b   {font-family: Verdana,Tahoma,Arial,sans-serif;
      font-size: 10pt;
      font-weight: bold;
      display: block;
      text-decoration: none;
      color: #D6DEF6;
      background: #A0B3EA;
      padding: 5px;
      border-bottom: 0;
      border-top: 1px solid #D0D9F4;
      border-right: 1px solid #D0D9F4;
      border-left: 1px solid #D0D9F4;}

#menu_link:hover  {color: #FFFFFF;
      background: #B5C4EF;
      border-left: 3px solid #001E6A;}

#menu_link_b:hover  {color: #FFFFFF;
      background: #B5C4EF;}

* html ul li   {width:150px;
      float: left;}
  * html li ul a  { height: 1%;}

ul li a:hover   {color: #FFFFFF; background: #B5C4EF;}

li:hover ul,li.over ul {display: block;}

Nun will das Menu aber bei der Benutzung des Internetexplorers nicht ausklappen. Ich habe gehört, dass es daran liegt, dass der Internet Explorer keine :hover Effekte für Pseudo Elemente interpretiert. Gibt es dafür einen hack, welcher das Problem beheben kann ?

Ich bin für jede Hilfe dankbar, denn das treibt mich hier bald zur Weissglut ;)

MFG

Michel Beischer

[Ashura]

Hallo Michel.

Nun will das Menu aber bei der Benutzung des Internetexplorers nicht ausklappen. Ich habe gehört, dass es daran liegt, dass der Internet Explorer keine :hover Effekte für Pseudo Elemente interpretiert. Gibt es dafür einen hack, welcher das Problem beheben kann ?

Mir sind zwei Methoden bekannt:

· Methode 1: Die Navigation bleibt wie sie ist, aber jeder Navigationspunkt erhält seine eigene Seite, von der die Unterpunkte ebenfalls erreichbar sind.

· Methode2: Binde eine entsprechende htc-Datei über die MS-proprietäre behavior-Eigenschaft ein.

Ich rate zur ersteren Methode.

Einen schönen Montag noch.

Gruß, Ashura

[Michel beischer]

Dank dir erstmal für die _schnelle_ Antwort!

· Methode2: Binde eine entsprechende htc-Datei über die MS-proprietäre behavior-Eigenschaft ein.

Ich rate zur ersteren Methode.

Gibt es einen bestimmten Grund / bestimmte Nachteile, warum du von der .htc Sache Abrätst?

Mir kommt ".htc" in diesem Zusammenhang auch bekannt vor (vom irgendwo lesen ;) )

mfg

Michel

[Ashura]

Hallo Michel.

Gibt es einen bestimmten Grund / bestimmte Nachteile, warum du von der .htc Sache Abrätst?

Ob ActiveX dafür erforderlich ist, weiß ich gerade nicht, JS ist es in jedem Fall. Ist dieses nicht aktiviert, ist die Navigation unbenutzbar. (Wenn nicht gerade irgendwie das CSS deaktiviert wird.)

Du kannst auch beides miteinander kombinieren, so dass IE-Nutzer nicht auf den schönen Effekt verzichten müssen. (Ich selbst habe dies in meinem derzeitigen Projekt auf diese Art und Weise geregelt.)

Eine weitere Alternative (dann aber für alle Browser) ist, die Unterpunkte beim Laden der Seite per JS auszublenden und dann auch mit JS einzublenden.
Aber erstens sollte CSS auch endlich einmal ausgiebig genutzt werden und zweitens ist diese Methode mit einem hässlichen Effekt beim Laden der Seite verbunden. (Die Navi wird schließlich erst ausgeblendet, wenn das Dokument fertig geladen wurde...)

Mir kommt ".htc" in diesem Zusammenhang auch bekannt vor (vom irgendwo lesen ;) )

Bei Interesse hilft die MSDN sicher weiter.

Einen schönen Montag noch.

Gruß, Ashura

[wahsaga]

hi,

Gibt es einen bestimmten Grund / bestimmte Nachteile, warum du von der .htc Sache Abrätst?

Weil es IIRC auf Javascript basiert - kein Javascript, kein Aufklappen, keine nutzbare Navigation (sofern du keinen Fallback einbaust, den Ashura ja schon als Möglichkeit 1 vorschlug).

Ebenfalls weiterhelfen könnte dir selfhtml mit dynamische CSS-Navigation für moderne Browser.

gruß,
wahsaga

[Der Michel nochmal *nerv* ;)]

Weil es IIRC auf Javascript basiert - kein Javascript, kein Aufklappen, keine nutzbare Navigation (sofern du keinen Fallback einbaust, den Ashura ja schon als Möglichkeit 1 vorschlug).

Fallback heisst dann jetzt, dass ich keinen "Effekt" mehr zu sehen bekomme und die untergeordnete Liste einfach mit "display:block" eingeblendet wird?

Und wenn ja, dann müsste ich jeder "untergeordneten" Liste eine eigene ID geben, damit nicht alle auf einmal erscheinen oder?

=(

Von Gestern auf Heute muss alles Barrierefrei sein und ich als Azubi darfs ausbaden ;)

MFG

Michel

[Ashura]

Hallo Martin.

Fallback heisst dann jetzt, dass ich keinen "Effekt" mehr zu sehen bekomme und die untergeordnete Liste einfach mit "display:block" eingeblendet wird?

Ein möglicher Fallback wäre, die gesamte Navigation immer sichtbar zu machen. Die andere Möglichkeit habe ich bereits genannt.

Und wenn ja, dann müsste ich jeder "untergeordneten" Liste eine eigene ID geben, damit nicht alle auf einmal erscheinen oder?

Da der aktuelle IE leider keine komplexen Selektoren beherrscht, ja.

Von Gestern auf Heute muss alles Barrierefrei sein und ich als Azubi darfs ausbaden ;)

Wie immer...

Einen schönen Montag noch.

Gruß, Ashura

[Ingo Turski]

Hi,

Und wenn ja, dann müsste ich jeder "untergeordneten" Liste eine eigene ID geben, damit nicht alle auf einmal erscheinen oder?

schau Dir mal diesen Entwurf an: Die Unterpunkte gehen im IE ohne Javascript nicht auf, aber wenn ein Hauptklink angeklickt wird, öffnen sie sich - auch für den IE - dauerhaft. So eine Lösung ist im Prinzip barrierefrei und hat nur den Nachteil, daß ohne CSS viel zu viele Menüpunkte vorhanden sind.
Eine ständige Anzeige aller Menüpunkte halte ich für äußerst unübersichtlich.

freundliche Grüße
Ingo