IE6: LI height bug

IE6: spazzatura, ancora usata però!Appena risolto un altro problema di incompatibilità di quello stron*o di IE6, il peggior browser che il mondo informatico e web abbia mai visto: non per problemi prestazionali, ma per problemi di compatibilità con le direttive del W3C!

Uno di questi problemi l'ho chiamato "LI Height bug" ovvero problema della gestione delle altezze di liste (UL>LI), gestite visivamente via CSS, per creare un menù di navigazione verticale.

 

Esempio menù (LI)

Per prima cosa vi do il codice minimale per la creazione di un menù di navigazione verticale fatto con le liste, se volete altri esempi chiedete ai ragazzi: menù verticale css.

Considerate che #menuList è l'id di un elemento di tipo UL.

#main #menu #menuList{
    list-style: none;
    padding: 0 0 0 0;
    margin: 0 0 10px 0;
}
#main #menu #menuList li{
    padding: 0 0 0 0;
    margin: 0 0 3px 0;
    height: 25px;
}
#main #menu #menuList a{
    display: block;
    background-image: url(img/_menuBg.gif);
    background-position: top;
    background-repeat: no-repeat;
    text-decoration: none;
    
    font-family: "Times New Roman", Times, serif;
    font-size: 15px;
    text-transform: uppercase;
    color: white;
    letter-spacing: -1px;
    padding: 6px 0 0 20px;
}
/* i6 suck... */
#main #menu #menuList li
{
height: auto !important; /* altri browser */
height: 1%; /* per IE */

}

Soluzione del problema

Grazie a quel genio di capobecchino, sono riuscito a capire che il problema del mio menù su IE6 era relativo a un problema di compatibilità risolvibile con un bordo, o almeno il buon @capobecchino ha testato inserendo un bordo di 1px sul <li> e si è risolto.

Ma perchè devo rovinare il mio layout con un bordo? Chiacchierando con lui mi sono ricordato un mio vecchio post, dove segnalavo problemi di gestione delle altezze dei DIV da parte di IE6 "Min height in IE". Vuoi vedere che il problema è il medesimo? Vuoi vedere che il mio LI fa i capricci con IE6 perchè essendo in modalità visiva display:block è uguale uguale a un DIV?

Ed in pochi nanosecondi è uscita la soluzione: IE6 ha problemi con la gestione dell'height dei DIV, o meglio degli elementi con display:block! E' sufficiente dare una dimensione al LI, che tanto IE6 se ne frega, e il gioco è fatto, non dimenticandosi di dire agli altri browser intellingenti di non considerare tale istruzione usando l'attributo !important dei CSS.

/* i6 suck... */
#main #menu #menuList li
{
height: auto !important; /* altri browser */
height: 1%; /* per IE */

}

Tutto chiaro? Concludo con una pillola del maestro capobecchino:

mi sa che se dono il mio cervello a google, superiamo bing come analisi logica 😛
 

 

Il problema IE6

Se ne parla spesso nei geek blog dei webmaster: la piaga IE6 affligge ancora il nostro lavoro e purtroppo, in Italia, l'incidenza sui navigatori – ovvero la quantità di utilizzatore di Internet Explorer 6 – varia ancora tra il 15 e il 25 %. Un dato assolutamente non sottovalutabile con un semplice "E' un problema loro" in quanto quota troppo incidente. Utenti che navigano male nel sito possono facilmente trasformarsi in clienti persi!

Cosa fare? Cercare di applicare tutte le possibili soluzioni perchè il sito si veda bene anche con IE6, testandolo magari con IE6 StandAlone. Inserire nel sito un avviso di aggiornare il browser. La tecnica potrebbe essere questa, ma a voi ogni soluzione venga in mente, basta sia non bloccante, altrimenti il clienti se ne va!

<html>
<head>
<script type="text/javascript">
function detectBrowser()
{
var browser=navigator.appName;
var b_version=navigator.appVersion;
var version=parseFloat(b_version);
if (navigator.appVersion.indexOf("MSIE 7") < 0 && navigator.appVersion.indexOf("MSIE 8") < 0)
  {
  alert("Attenzione, il tuo browser IE è molto vecchio. Per godere appieno della qualità dei siti internet e bloccare software dannoso di consigliamo di aggiornarlo: http://www.microsoft.com/windows/Internet-explorer/default.aspx\n\n" + navigator.appVersion);
  }
}
</script>
</head>
<body onload="detectBrowser();">
</body>
</html>

Lo script proposto verifica che se il browser non sia MSIE 7 o MSIE 8, allora deve essere aggiornato. E' una versione dimostrativa e  non risolutiva: se esce MSIE 9 è da aggiornare. Purtroppo il numero della versione non è un dato atomico ma deve essere estratto da una stringa: se volete procedere voi con la creazione dello script definitivo i commenti sono a vostra disposizione.

4.0 (compatible; MSIE 6.0; Windows NT 5.1; GTB6; .NET CLR 1.1.4322; InfoPath.1; .NET CLR 2.0.50727; .NET CLR 3.0.04506.30; FDM; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C; .NET4.0E)

Una interessante discussione in merito al tema IE6, la trovate sul sito Design Multimedia.

 

foto di Morg

Loading Facebook Comments ...

31 pensieri su “IE6: LI height bug

  1. Joel

    Già, IE6 se ne frega degli !important … bello il nome del commento, anche io ne ho qualcuno dove insulto zio bill e co. 😀

    Un piccolo consiglio, forse sarebbe meglio sfruttare:

    $_SERVER[‘HTTP_USER_AGENT’]

    Si sa mai, l’utonto avesse anche i .js disabilitati…

    byezzzzzzzz

    Rispondi
  2. DesMM

    Molto bene un hack css in più non fa male, presto lo troverò, approvo l’iniziativa dell’alert anche se penso di presentarla in maniera diversa magari con un banner.

    Rispondi
  3. Merlinox Autore articolo

    @DesMM assolutamente si! Ma anche un bel popover (tanto per rompere le palle), magari con un cookie “settimanale”. Cmq la soluzione che trovi qua penso risolva l’80% dei problemi di compatibilità… infatti ne avevo già parlato e mi ero dimenticato!

    Rispondi
  4. Merlinox Autore articolo

    @DoZ l’idea non è male. Il fatto di avere un signore JS che mi rismacchina tutto il CSS sinceramente non lo apprezzo molto: sicuramente però è comodo! Grazie della segnalazione. A buon rendere.

    Rispondi
  5. Arquen

    Ciao, piacere di conoscerti… curiosando sono entrato qui, ho letto e così, sempre per curiosità, ho fatto delle prove, ma non ho capito dov’è il problema.

    Cioè, ho creato un menù prendendo quel codice, ho aggiunto un colore di background al li (altrimenti non potevo capire il problema dell’altezza differente), ho aperto ie8, ie6 e ff.

    Il risultato a video, però, è lo stesso su tutti e 3 i browsers. Così ho eliminato il suck (come lo chiami tu), l’altezza è aumentata, ma è aumentata in egual misura su tutti e 3 i browsers. Quindi, ripeto, non ho capito il problema. 😮

    Rispondi
    1. Merlinox Autore articolo

      Purtroppo non posso mandarti il caso specifico sul quale ho lavorato. Comunque il problema salta fuori con gli elementi in display:block in quanto IE6 spesso non è in grado di calcolare in modo corretto l’altezza automatica. Alla fine il suck lo sui se ti serve. Se dai test tutto ti compare perfetto sei apposto, no?

      Rispondi
    1. Merlinox Autore articolo

      Dovrei provarlo, ma così a pelle non mi sembra una soluzione. Il problema è il medesimo, ma passare un elemento da block a inline, ne cambia completamente il comportamento visivo… o no?

      Rispondi
  6. Arquen

    Ah, ok ok… quindi è un altro menù che però usa display:block.

    Cmq, nel menù di esempio di qui, se metto il suck l’altezza è di un tot identico su tutti e 3 i browser su cui ho testato, se tolgo il suck l’altezza è di un tot differente, ma sempre identico su tutti e 3 i browser, quindi non capivo perchè scrivere quelle ultime due righe di css specificando che è solo per un browser, quando invece cambia l’altezza su tutti. Io però ho creato una pagina di prova dove c’è solo il menù, quindi nessuna interferenza da altre cose.

    Rispondi
  7. Lauryn

    @merlinox: sì il display: inline in effetti non c’entra.devo approfondire ma credo che la tua sia la soluzione più corretta 🙂

    @theStylist: condivido, ma quando avrai da fare un sito che è visitato principalmente da utenti ie6 impossibilitati ad aggiornare (vedi università, etc) devi essere in grado, altrimenti sei un webdesigner di seconda categoria 😉 (provocazione 😉 )

    Rispondi
  8. kiby

    @Merlinox ciao, sono l’utente che ha postato la soluzione su italianwebdesign.it.
    Volevo dirti che non cambia assolutamente il comportamento visivo. Il display: inline serve appunto quando si inserisco gli elementi “a” in una lista a livello di blocco in cui si è definita la larghezza.
    La soluzione proposta la trovi sul libro “css guida completa” quando spiega i menù verticale e quindi i problemi relativi ad ie6. Trovi questa soluzione anche su internet in moltissimi siti e se non ricordo male anche su html.it (devo riguardarci però!).
    Io l’ho sempre utilizzata e non mi ha mai dato problemi.
    Con questa soluzione poi non utilizzo nessun hack particolare e quindi a mio avviso è una soluzione più idonea.
    Per quanto riguarda l’altezza invece basta settarla a 0.

    Cmq… sono ben disponibile ad apprendere altre soluzioni però cerco sempre di utilizzare quelle con meno hack possibili!!

    Ciao

    Rispondi
  9. Merlinox Autore articolo

    Grazie @kiby di essere passato. La mia risposta era di “In linea di massima” e non in un caso specifico, mi scuso se non l’ho spiegato bene.
    Le soluzioni / hack sono molte. Solitamente si mantiene l’utilizzo del display:block nei link per permettere loro che tutta l’area definita sia cliccabile, ma sono certo che non devo dirlo a te 🙂
    Appena posso provo la tua soluzione.

    Rispondi
  10. kiby

    @Merlinox Non devi scusarti di nulla.
    Il display:inline fa appunto quello nel caso specifico che ti ho indicato.
    Un’altra soluzione se è possibile utilizzarla è quella di definire la larghezza del menù verticale e mettere in float:left sia l’elemento ul che il li specificando sempre a quest’ultimi la larghezza. In questo modo non devi neanche utilizzare degli hack per ie6.
    Altra soluzione al problema è quella di utilizzare il display:block e la width sia sull’elemento li che sull’elemento a. Non si imposta nessun float negli elementi.
    Anche questo stratagemma non ha bisogno di ulteriori hack per funzionare su ie6.

    Se vuoi posso spedirti per e-mail i vari esempi così puoi provarli, sperimentarli e magari dedicarci un post!! 😉

    Ciao

    Rispondi
  11. kiby

    @Merlinox
    Io dovrei scrivere il post?? Sono io ad esserne onorato!! Nel caso scrivo tutto per bene e te lo spedisco per e-mail. Penserai poi tu ad ottimizzarlo e nel caso renderlo pubblico.
    Ti ringrazio moltissimo per l’offerta!! 😀 😀

    P.S: ho notato una dimenticanza in un mio commento: “… mettere in float:left sia l’elemento ul che il li..” e anche all’elemento a!! 🙂

    Ciao

    Rispondi
  12. kiby

    Merlinox :
    Grazie mille @kiby , per il post intendevo che lo pubblicassi nel tuo blog
    Qui ci scrivo solo io, almeno qui

    Si si.. avevo capito… era solo per dirti che se volevi potevo scrivere qualcosa e poi te lo passavo se lo ritenevi degno di nota. Io al momento non ho nessun blog. Presto scriverò su un blog di un amico di queste tematiche.. però sarà tutto attivo per il prossimo anno!! 😀

    Rispondi
  13. Pingback: Google Browsersize è utile?

  14. Lauryn

    ciao merlinox, a distanza di tempo mi ritrovo con in mano la Guida completa ai Css di Gianluca Troiani e confermo quanto dice kiby.
    L’hack è molto semplice: basta indicare in un css solo per ie6 le due seguenti regole:

    .menu li {
    display:inline;
    }
    .menu a {
    height: 0;
    }

    La soluzione non riguarda un menu orizzontale come potrebbe sembrare, il display: inline non comporta che gli elementi si posizionino “inline”.

    Anche la tua soluzione comunque funziona bene infatti l’ho usata recentemente, grazie!

    Rispondi

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *