[IE6-Problem] CSS-Menü wird nicht richtig angezeigt

[Sm0kiT]

Hallo,
habe ein Problem mit der Darstellung des CSS-Menüs im Internet Explorer 6. Bin noch ein Anfänger, was Webdesign angeht und komme einfach nicht dahinter, wieso der IE6 das Menü so merkwürdig darstellt. Habe schon versucht mit Kompatiblitäts-Javascripts dem entgegenzuwirken, hat aber nur wenig geholfen. Die Seite habe ich mehr oder weniger auf Basis des Firefox erstellt, soll heißen nur mit dem die Darstellung der Site überprüft. Da lief, wie auch nicht anders zu erwarten, alles perfekt. Nur der versch***ene IE macht mal wieder Zicken. Hoffe einer von euch weiß woran es liegt :)

Die Site: Weser-Ems Blister

cheers

Sm0kiT

P.S.: Mit CSS-Hacks hab ichs auch schon versucht; bisher ohne Erfolg.

 

[threadi]

Hab keinen IE6 hier um mir das anzuschauen. Bei Menüs im IE6 habe ich jedoch meist ein Problem mit der Einhaltung der Höhe. Da macht er einzelne Menüpunkte meist höher als gedacht. Gib den Menüpunkten (li und/oder a) mal ein "height: 1%;". Das wirkt meist Wunder.

 

[T!P-TOP]

Mach das JavaScript wieder raus. (muss auch ohne funktionieren!)

Der IE 6 schiebt bei dir die vertikale Navigation in der Höhe auseinander. Zeig mal bitte das CSS für die Navi.

 

[Sm0kiT]

Habe gerade den Tipp von threadi eingearbeit und es hat tatsächlich auch etwas gebracht, wobei ich denke, dass dadurch nur die Abstände verringert wurden und nicht das eigentlich Problem behoben wurde, nämlich, dass der IE6 Leerzeilen zwischen die einzelnen Listeneinträge packt.

Hier das CSS des Menüs:

/*!!!!!!!!!!! MyCSSMenu Core CSS [Do Not Modify!] !!!!!!!!!!!!!*/
.qmmc .qmdivider{display:block;font-size:1px;border-width:0px;border-style:solid;position:relative;z-index:1;}.qmmc .qmdividery{float:left;width:0px;}.qmmc .qmtitle{display:block;cursor:default;white-space:nowrap;position:relative;z-index:1;}.qmclear {font-size:1px;height:0px;width:0px;clear:left;line-height:0px;display:block;float:none !important;}.qmmc {position:relative;zoom:1;z-index:10;}.qmmc a, .qmmc li {float:left;display:block;white-space:nowrap;position:relative;z-index:1;}.qmmc div a, .qmmc ul a, .qmmc ul li {float:none;}.qmsh div a {float:left;}.qmmc div{visibility:hidden;position:absolute;}.qmmc li {z-index:auto;}.qmmc ul {left:-10000px;position:absolute;z-index:10;}.qmmc, .qmmc ul {list-style:none;padding:0px;margin:0px;}.qmmc li a {float:none}.qmmc li:hover>ul{left:auto;}#qm0 li {float:none;}#qm0 li:hover>ul{top:0px;left:100%;}


/*!!!!!!!!!!! MyCSSMenu Styles !!!!!!!!!!!*/


    /* MyCSSMenu 0 */

    /*"""""""" (MAIN) Container""""""""*/    
    #qm0    
    {    
        width:200px;
        margin:0px;
    }


    /*"""""""" (MAIN) Items""""""""*/    
    #qm0 a    
    {    
        padding:3px 20px 3px 3px;
        background-color:#93BF39;
        color:#FFFFFF;
        font-family:Arial;
        font-size:17px;
        text-decoration:none;
        border-width:0px 0px 2px;
        border-style:dotted;
        border-color:#FFFFFF;
    }


    /*"""""""" (MAIN) Hover State""""""""*/    
    #qm0 a:hover    
    {    
        color:#054163;
        border-color:#054163;
    }


    /*"""""""" (MAIN) Active State""""""""*/    
    body #qm0 .qmactive, body #qm0 .qmactive:hover    
    {    
        color:#054163;
        border-color:#054163;
    }


    /*"""""""" (SUB) Container""""""""*/    
    #qm0 div, #qm0 ul    
    {    
        background-color:#FFFFFF;
        border-width:2px;
        border-style:solid;
        border-color:#054163;
    }


    /*"""""""" (SUB) Items""""""""*/    
    #qm0 div a, #qm0 ul a    
    {    
        padding:3px 20px 3px 5px;
        color: #FFFFFF;
        font-size:14px;
        border-width:0px 0px 1px;
    }


    /*"""""""" (SUB) Hover State""""""""*/    
    #qm0 div a:hover, #qm0 ul a:hover    
    {    
        color:#054163;
    }


    /*"""""""" (SUB) Active State""""""""*/    
    body #qm0 div .qmactive, body #qm0 div .qmactive:hover    
    {    
        color:#054163;
    }


    /*"""""""" Box Animation Styles""""""""*/    
    #qm0 .qmbox    
    {    
        border-width:1px;
        border-style:solid;
        border-color:#999999;
    }

Edit: Wenn ich das JS wieder raus mache, klappt das Menü im IE6 gar nicht mehr auf.

 

[T!P-TOP]

Hm, naja normalerweise reicht ja display none und display block, damit das Menü aufklappt.

Gib mal eine Höhe für die li's und a links an.

 

[Sm0kiT]

Also ohne dem JS gehts irgendwie net. Habe mal 'n bisschen mit display none und noblock rumgespielt, aber das änderte nichts daran, dass ohne dem JS das Menü im IE nicht aufklappt. Vielleicht weiß ich auch nicht genau, wie Du das meinst - habe es halt auf <ul> und <li> angewendet. Die Höhe für <li> und <a> habe ich jetzt festgelegt:

* html #qm0 a { height: 100%; }
* html #qm0 li { height: 100%; }

Aber es werden immer noch Abstände zwischen die aufklappbaren Listenpunkte gehauen, auch wenn sie jetzt um einiges kleiner sind. Bei den Menüpunkten, die nicht aufklappen sieht es ja OK aus. Zudem ist mir nun aufgefallen, dass hinter den Menüeinträgen des Untermenüs weiße Flächen entstehen, sprich das grüne Feld, dass die Links umgibt von der Länge des jeweiligen abhängt :?

Edit: Die Seite hab ich mittlerweile aktualisiert.

 

[neuroleptika]

Das Javascript benötigt hier nur der IE<7 um li:hover zu ermöglichen.
Die vertikalen Abstände verursacht der sogenannte Whitespace-Bug.
Eine Möglichkeit:

* html #qm0 {
zoom: 1;
}

* html  #qm0 a {
 display: inline;
 zoom:1;
 width: 100%;
 border-bottom-style: dotted;
 border-bottom-color: #93BF39;
}

* html #qm0 li {
 width: 100%; 
}

 

[Sm0kiT]

Vielen Dank :)

Haut jetzt endlich zu 100% hin!

MfG
Sm0kiT

 

[neuroleptika]

Einen weiteren Bug habe ich nicht erwähnt:
Im IE<7 wird der Hintergrund unter dem Rahmen nicht (immer) ausgefüllt. Deshalb hattest du zeitweise #fff dotted auf gleichfarbenen Hintergrund. Im IE6 sah es dann so aus, als ob die Links 2px auseinander liegen.

Deshalb habe ich die Rahmenfarbe einfach auf grün (Hintergrungfarbe von a) gesetzt:

* html  #qm0 a {
...
 border-bottom-style: dotted;
 border-bottom-color: [COLOR="#006400"]#93BF39[/COLOR];
}

 

[Sm0kiT]

Jetzt wo du es erwähnst... Ist mir vorher gar nicht aufgefallen.

Nochmals besten Dank.

Edit: Kennst Du vielleicht eine Seite, wo alle IE-Bugs aufgelistet sind?

 

[neuroleptika]

Eine vollständige Liste kenne ich nicht aber hier (positioniseverything.net) sind einige aufgelistet.
Viele Bugs hängen mit haslayout zusammen.

 

[Gimli]

Mir ist es zur Zeit sowieso meistens nicht wert, für den Internet explorer 6 und darunter zu optimieren. Ich schau nämlich immer in meine Webstatistiken und da ist vielleicht 1 Benutzer aus 1000 jemand mit IE6 oder drunter. Außerdem kann man diese Zahl hier gut einsehen: Internet Explorer Browser
Das ist nur meine Meinung. Jeder muss selbst entscheiden, ob der Aufwand es wert ist. Ich möchte nur deutlich machen, dass es sich nicht in allen fällen lohnt, für den IE6 und drunter zu optimieren.

 

[neuroleptika]

Naja, hier geht es wohl um Verpackungsmittel.
Auf W3Schools steht:

W3Schools is a website for people with an interest for web technologies. These people are more interested in using alternative browsers than the average user.

Das trifft sicher auch auf die IE-Versionen zu.
Siehe dir mal die Statistik von WebHits an.

 

[Gimli]

naja jeder einigermaßen gescheite User wird wohl das automatische update für den ie machen, bzw. auf den ie7 oder8 updaten. Außerdem kaufen sich einige leute auch win 7, wo es gar keinen ie 6 oder 7 standardmäßig gibt.

 

[neuroleptika]

Wenn du weiter über gescheite User und Browservorlieben reden willst, mache doch den x-ten Thread dazu auf.
Mir wird das hier zu Offtopic.