ie6 / hover / css

mfwenzel · 19.08.2009

Moin,

leider bin ich bei google & co nicht fündig geworden.
Meine Navi klappt sich per a:hover aus. Das funktioniert auch ganz dolle, nur der leiber Herr IE6 möchte das nicht.

HTML ist:

Code:

 <!--begin menusidebar-->
 <div id="navigation">
   <ul>
     <a href="index_k2.html"><li>Informationen</li> </a>    
     <li><div class="arrow"><a href="typen/106.html" class="arrowfuersub">Haustypen</a></div>
       <ul>
           <a href="typen/106.html"><li>Haus 106</li></a>
           <a href="typen/111.html"><li>Haus 111</li></a>
           <a href="typen/112.html"><li>Haus 112</li></a>
           <a href="typen/116.html"><li>Haus 116</li></a>
         <a href="typen/124.html"><li>Haus 124</li></a>
         <a href="typen/124a.html"><li>Haus 124a</li></a>    
          <a href="typen/130.html"><li>Haus 130</li></a>
           <a href="typen/131.html"><li>Haus 131</li></a>
    </ul>      
     <a href="lageplan_k2.html"><li>Lageplan</li></a>
     <a href="fortschritt.html"><li>Baufortschritt 1. BV</li></a>
     <a href="baubeschreibung.html"><li>Baubeschreibung</li></a>
     <a href="../index.html"><li>&lt;&lt; zurück</li></a></ul></div>
      </div>
 <!--end menusidebar-->

und CSS ist

Code:

@charset "utf-8";
/* CSS Document Sidebar Navigation*/


/*Main Menu*/
#navigation ul {
    margin:0px;
    padding:0px;
    background-color:#444;
}


#navigation ul li {
    height:30px;
    line-height:30px;
    list-style:none;
    padding-left:20px;
    color:#FFF;
    border-top:#fff solid;
    border-bottom:#fff solid;
    border-width:1px;
    cursor:pointer;
}


#navigation ul li:hover {
    background-color:#F57601;
    position:relative;
}

/*Sub Menu*/
#navigation ul ul {
    display:none;
    position:absolute;
    left:157px;
    top:5px;
    border:#fff solid;
    border-width:1px;
    background-color:#F57601;
}
#navigation ul li:hover ul {display:block;}

#navigation ul ul li {
    width:80px;
    float:left;
    display:inline;
    border:none;
}
#navigation ul ul li:hover {
    text-decoration:underline;
    border:none;
}

#navigation li:hover ul li ul {display:none;}

#navigation ul ul li ul {left:110px; background-color:#0099CC;}
#navigation ul ul li:hover ul {display:block;}
#navigation ul li a {
    color: #FFF;
    display: block;
}
.arrow        {
    background-image: url(../images/MenuBarRightHover.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
}

MyBad · 19.08.2009

AW: ie6 / hover / css

Hallo!

Ja, der IE 6 macht so einiges nicht. Aber dein Source ist auch nicht gerade valide! Den würde ich noch einmal überarbeiten. Der strotzt nur so vor Fehlern. Im XHTML ist zum Beispiel <li>-Tags innerhalb eines <a>-Tags verboten. Aber da ist noch mehr.

Gruß
Tim

stroyer · 19.08.2009

AW: ie6 / hover / css

Du könntest dagegegn z.B.
<a href="typen/106.html"><li>Haus 106</li></a>
gegen
<li><a href="typen/106.html">Haus 106</a></li>
tauschen.

Zitat: "Leider unterstützen Opera und der Internet Explorer bis zur Version 6 :hover nur für <a>-Tags."

Das heißt li:hover geht im IE6 generell nicht.
Nur a:hover.
Das heißt, du musst irgendwie eine Struktur bauen, die ungefähr wie <li><a><div>text</div></a></li> aussieht.

quasibodo · 19.08.2009

AW: ie6 / hover / css

...und Du solltest auch mal angeben, was das für ein html sein soll:
HTML 4.01 oder XHTML?
Transitional oder Strickt?

Mal wird ein <li>-Tag geschlossen, mal nicht.

Hol Dir erst mal die Webdeveloper-Toolbar für den Firefox, dann schau mal bei
SELFHTML 8.1.2 (HTML-Dateien selbst erstellen) und
CSS 4 You - The Finest in Stylesheets
die Regeln an, die allesamt beachtet werden sollten.

Fertige Lösungen, die u.a. auch im IE funzen, findet man, wenn man nach "CSS-Flyout" gugelt...

SineTempore · 19.08.2009

AW: ie6 / hover / css

Eine Lösung wäre ein bischen JS einzusetzen.
siehe

stroyer · 19.08.2009

AW: ie6 / hover / css

Oder eben sauber verschachtelten Code zu verwenden.

SineTempore · 19.08.2009

AW: ie6 / hover / css

SELFHTML schrieb:
Um ein dynamisches Einblenden der Unternavigation auch im Internet Explorer 5 und 6 und anderen Browsern ohne ausreichende CSS-Implementierung zu ermöglichen, bleibt Ihnen derzeit nur eine Realisierung über JavaScript.

Der IE bis zur Version 6 unterstützt das :hover nur bei <a>-Tags

stroyer · 19.08.2009

AW: ie6 / hover / css

stroyer schrieb:
Du könntest dagegegn z.B.
<a href="typen/106.html"><li>Haus 106</li></a>
gegen
<li><a href="typen/106.html">Haus 106</a></li>
tauschen.

Zitat: "Leider unterstützen Opera und der Internet Explorer bis zur Version 6 :hover nur für <a>-Tags."

Das heißt li:hover geht im IE6 generell nicht.
Nur a:hover.
Das heißt, du musst irgendwie eine Struktur bauen, die ungefähr wie <li><a><div>text</div></a></li> aussieht.

Hab ich ja schon geschrieben. Aber wenn man die Tags richtig verschachtelt, ist es sehrwohl möglich!

sokie · 19.08.2009

AW: ie6 / hover / css

stroyer schrieb:
Hab ich ja schon geschrieben. Aber wenn man die Tags richtig verschachtelt, ist es sehrwohl möglich!

Wir brennen darauf, diese Aussage an einem kleinen "korrekt geschachtelten" Beispiel für das /*Sub Menue*/ des Eingangspostings für den IE6 zu sehen.

bis dahin kann man eben nur feststellen, dass es ohne Javascript für den IE6 nicht geht.(s. Post #5 Sine Tempore)

stroyer · 19.08.2009

AW: ie6 / hover / css

Dass das Untermenü dargestellt wird, wenn man aufs entsprechende Hauptmenü fährt, funktioniert leicht.
Ich habe allerdings nicht bedacht, dass man a:hover nicht ineinander verschachteln kann (es ist immer maximal nur bei einem Link :hover aktiv)
Auf zweiter Ebene wird es deshalb unmöglich, es nach meiner Idee zu machen.
Ich habe dann einfach eine imagemap darüber gelegt.
Die Methode ist allerdings unschön und ich gebe zu, dass Javascript wirklich die bessere Lösung ist.

HTML:

<html>
  <head>
    <style>
      #navi a .main
        {
          background-color:#aaa;
          width:100%;
          padding:10px;
        }
      .fly
        {
          position:absolute;
          margin-left:-100px;
          background-color:yellow;
          width:100px;
          height:60px;
        }
      .fly img
        {
          border:none;
          position:absolute;
        }
      #navi a .fly
        {
          display:none;
        }
      #navi a:hover .main
        {
          background-color:orange;
        }
      #navi a:hover .fly
        {
          display:inline;
        }
      a
        {
          cursor:pointer;
        }
    </style>
  </head>
  <body>
    <span id="navi" style="width:300px;">
      <a href="#">
        <span class="main">
          Informationen
        </span>
      </a>
      <a href="#">
        <span class="main">
          Haustypen
        </span>
        <span class="fly">
          <img src="1x1transparent.gif" width="100" height="60" usemap="#m" />
          <map name="m">
            <area shape="rect" coords="0,0,100,20" href="#1">
            <area shape="rect" coords="0,20,100,40" href="#2">
            <area shape="rect" coords="0,40,100,60" href="#3">
          </map>
            content1
          <br />
            content2
          <br />
            content3
        </span>
      </a>
      <a href="#">
        <span class="main">
          Lageplan
        </span>
      </a>
    </span>
  </body>
</html>

(funktioniert nur im IE 6 vom CSS her schön bzw. im Quirks-Mode vom IE8 )

mfwenzel · 20.08.2009

AW: ie6 / hover / css

Hm ich merke schon...

ich werd mein Menü wohl in Java machen. Ist sicherlich die "schönste" Variante.

Vielen Dank!

MyBad · 20.08.2009

AW: ie6 / hover / css

Das Menü musst du schon in HTML mit CSS erstellen aber das aufklappen des Untermenüs musst du wohl oder übel mit JavaScript lösen.

stroyer · 20.08.2009

AW: ie6 / hover / css

Ich würde dir eventuell sogar empfehlen ein Framework wie mootools oder jquery zu verwenden, damit kannst du das Menü animieren (z.B. ein ganz einfaches wie auf )

sternenkaiser · 27.08.2009

AW: ie6 / hover / css

Für den Hover-Effekt bei IE6 braucht man kein JS. Mit dem csshover.htc Script klappt das auch für den alten IE wunderbar siehe auch hier SELFHTML Forumsarchiv / 2007 / Februar / IE6 kann kein hover div ?

spacefront · 27.08.2009

AW: ie6 / hover / css

Hmm vielleicht dem IE6 nicht mehr so beachten.
Nur so kann man den mist langsam loswerden. Oder zumindest eine Abgepeckte IE 6 Version machen.

Nur so mal als Idee

stroyer · 27.08.2009

AW: ie6 / hover / css

Wenn Javascript nicht funktioniert, tun es behavior Scripts auch nicht.
Du kannst dir im Prinzip aussuchen, ob du bei A) allen Browsern ohne Javascript, B) allen IE6 oder C) allen IE6 ohne Javascript eine schirchere Webite in kauf nimmst.

RolfiD · 27.11.2009

AW: ie6 / hover / css

Was mir insgesamt nicht ganz klar ist:

Geht es jetzt mehr um die Mängel von IE6 (und Konsorten) oder mehr um die Nutzung von Hover-Effekten in Untermenus?
In leterem Fall könnte man ja auch im Untermenu auf diese Effekte Verzichten ?

Ist natürlich optisch nicht so schön und "konsequent".

Och bin halt auch gerade auf der Suche nach Möglichkeiten, rein mit CSS (und HTML bzw. XHTML) Button-"ähnliche" Optik in UL-Menus zu erreichen.

Wo kann man eigentlich praktische Beispiele finden?

Vielen Dank für etwaige Kommentare, bin (noch) kein versierter CSS-Nutzer ;-)

MyBad · 27.11.2009

AW: ie6 / hover / css

Das Problem am IE 6 ist, dass man rein mit CSS und HTML keine Aufklappbaren Untermenüs hinbekommt. Dafür muss man leider immer wieder auf JavaScript zurückgreifen.

Der Aufbau eines Untermenüs ist recht simpel und könnte etwa so aussehen:

HTML:

<ul class="hauptmenue">
  <li>Top 1</li>
  <li>
       Top 2 - mit Untermenue
       <ul class="untermenue">
         <li>Sub 1</li>
         <li>Sub 2</li>
       </ul> 
  </li>
</ul>