Menu sbagliato solo su IE6

[pictor]

Ciao,

ho un dropdown menu realizzato coi CSS sul mio sito.

Funziona molto bene su tutti i browser. L'unico problema l'ho con Internet Explorer 5 e 6, dovo le voci di menu non prendono il float e stanno una sotto l'altra anzichè affiancate.

Il markup è semplicemente una Unordered List con <ul> e[*].

Il CSS è

"dynamicMenu.css"

#menu {
    /*
    width: 100%;
    */
    background: #eee;
    float: left;
    
}

#menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
    /* width: 12em; */
    float: left;
    z-index: 30;    /* Senza z-index i sottomenu appaiono al di sotto del testo in home page */
    
}

#menu a, #menu h2 {
    font: bold 11px/16px arial, helvetica, sans-serif;
    display: block;
    /*
    border-width: 1px;
    border-style: solid;
    border-color: #ccc #888 #555 #bbb;
    */
    margin: 0;
    padding: 2px 3px;
    
}

#menu h2 {
    /*
    color: #fff;
    background: #000;
    text-transform: uppercase;
    */
    
}

#menu a {
    
    /*color: #000;
    background: #efefef;
    text-decoration: none;
    */
    
}

#menu a:hover {
    color: #a00;
    background: #fff;
    
}

#menu li {position: relative;}

#menu ul ul ul {    /* Dubbio: questo selettore a cosa serve? Agli eventuali menu di terzo livello? */
    position: absolute;
    top: 0;
    left: 100%;
    
    z-index: 10;
    
}

#menu ul ul {
    position: absolute;
    z-index: 50;
    top: 100%;
    left: 0;    /*    Altrimenti su IE7 i sottomenu sono disallineati dal menu */
    
}

div#menu ul ul {
    display: none;

}

div#menu ul li:hover ul
{display: block;}

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}

body {
    behavior: url(csshover2.htc);
}

#menu a {
    padding-left: 5.5em;
} 

"menu.css"

@import url("dynamicMenu.css");

#menu {
    width: 100%;
    background-color: #2F495D;
    
}

/* Menu principale */

#menu ul {
    position: relative;
    
    list-style: none;
    margin: 0;
    padding: 0;
    
}

#menu ul li, #menu ul li a {
    /* Posizione */
    float: left;
    /*
    height: 20px;
    */
    
    /* Stile */
    padding: 0;
    background-color: #2f495d;
    color: #fff;
    
    font-weight: bold;
    font-size: 90%;
    
}

#menu ul li a {
    /* Stile */
    text-decoration: none;
    padding: 3px 5px;
    margin: 1px;
}

#menu ul li:hover a {
    text-decoration: underline;
}

#menu ul li:hover, #menu ul li:hover a {
    background-color: #B53B48;
    color: #fff;
}

#menu ul li:hover ul, #menu ul li:hover ul li, #menu ul li:hover ul li a {
    background-color: #d7848c;
    color: #fff;
}


/* Sottomenu */

#menu ul ul {
    /* Posizionamento 
    position: absolute;
    right: 10%;
    
    display: none;
    width: 300px;
    */
    /* Stile */
    
}

#menu ul li:hover ul{
    /* Posizionamento */
    display: block;    /* NB: Fa apparire i sottoelementi */
    
}


div#menu ul li ul li:hover {
    background-color: #d7848c;
    font-size: 110%;
}

/* Menu */

li.no_link, li.no_link:hover {
    
}

li.no_link:hover a {
    cursor: default;
    display: none;
    background-color: #20b2aa;
    font-size: 100%;
}

#menu ul ul li {
    clear: both;    /* Altrimenti i menu con il nome troppo corto si accavallano */
}

#menu ul ul {
    border-left: 1px solid #B53B48;
} 

"ie.css"

/* CSS per IE */
    
    body {
        font-size: .8em;
    }
    
    
    /* Menu orizzontale */
    #menu a, #menu li{
        display: inline;
        float: left;
        margin: 1px;
        
        /* 
            Su IE è indispensabile impostare una larghezza fissa.
            Per rednerlo più eterogeneo allora qua si alline il testo al centro
         */
        width: 100px;
        text-align: center;
        
    }
    
    #menu ul ul a{
        /* L'allineamento del testo dei sottomenu però lo vogliamo sempre laterale a sinistra */
        text-align: left;
    
    } 

Come posso risolvere l'anomalia?

[StefanoC]

Ti segnalo

visualizzato ok su FF 3.0.9 e su Safari.
su IE6 e IE8 stesso problema.
su IE 7 simile a FF, ma con più distanza in orizzontale

comincerei col semplificare il css...

e poi provare, provare, provare

x IE6 fregatene, fra 4 mesi sarà morto.

[pictor]

Originariamente inviato da StefanoC
Ti segnalo

visualizzato ok su FF 3.0.9 e su Safari.
su IE6 e IE8 stesso problema.

Eggià... immaginavo anche sull'8 :-(

su IE 7 simile a FF, ma con più distanza in orizzontale

Qua non so come evitare di dover specificare la larghezza. Se non lo faccio non funziona bene su IE7.

comincerei col semplificare il css...

E come... le regole sono quelle che devono essere.

e poi provare, provare, provare

Suggerimenti?

x IE6 fregatene, fra 4 mesi sarà morto.

Non sono un affiliato Microsoft. Sfortunatamente se un cliente usa Internet Explorer 6 non è certo professionale dirgli di cambiare browser.
Al cliente non gliene importa una cippa di cosa Microsoft supporta o no

[fcaldera]

Originariamente inviato da StefanoC
x IE6 fregatene, fra 4 mesi sarà morto.

Non credo che questa considerazione possa essere d'aiuto...

[StefanoC]

Originariamente inviato da pictor
Eggià... immaginavo anche sull'8 :-(

Suggerimenti?

Non sono un affiliato Microsoft. Sfortunatamente se un cliente usa Internet Explorer 6 non è certo professionale dirgli di cambiare browser.
Al cliente non gliene importa una cippa di cosa Microsoft supporta o no

I disagree.
dato che il sito lo sviluppo io, la mia IE6 warning campaign sta dando i suoi frutti: su una media di 4 anni di navigazione IE6 sta ora perdendo circa l'1,5% di share alla settimana e nessuno si lamenta. Ora sono al 27,52 %. Conto di non vedere più nessuno che lo usi entro pochi mesi: faccio largo uso di selettori fartello p+p+p e discendente div > H3 ...

Non è cattiveria, è solo imitare quello che fanno molti siti all'estero.

Visita questo sito http://deaxon.com/ con E senza IE6.... questa si che è una scelta radicale ...

Stefano

[StefanoC]

Ho provato a guardare la pagina web.

Io comincerei a valutare se i due commenti condizionali:

<!--[if IE]>
<!--[if lte IE 7]>

siano realmente utili/indispensabili : ho la sensazione che creino + confusione che altro. Prova a cavarli per vedere l'effetto sui browser incriminati...

ciao,
stefano

[pictor]

No quelli sono indispensabili per il funzionamento del menu CSS, che corregge le imperfezioni di IE (anche se non totalmente).
Non posso rimuoverli.