IE6: LI height bug
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
Approfondimenti online
La tecnologia informatica ha fatto passi da gigante. In modo particolare Google, che con il suo analizzatore di testo, è in grado di proporre collegamenti contestuali a quanto hai appena letto. Questi i link pubblicitari proposti da Adsense.
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
@Joel sicuramente sempre meglio usare controlli lato server, quando è possibile e quando c’è un’azione che non è sincrona. Ottimo consiglio.
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.
@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!
Bravo, buono a sapersi
Mi ricordavo di averne sentito parlare, ma non ricordavo dove; ora mi sono ricordato che ne ho scritto addirittura sul mio blog
http://www.dozarte.com/wordpress/2008/12/07/non-preoccupiamoci-piu-di-explorer-6/
Si tratta di una libreria javascript che dovrebbe far comportare IE6 come se fosse IE7, mettendo una pezza ai vari bug CSS e HTML.
Bello, no?
@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.
http://tinyurl.com/ya65qld IE6: LI height bug
This comment was originally posted on Twitter
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.
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?
ciao merlinox, ti segnalo una soluzione proposta da un mio utente:
http://www.italianwebdesign.it/bug-di-explorer-6-sugli-elementi-di-lista/#comment-20783
credo sia molto veloce, si tratta della stessa cosa?
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?
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.
IE6 è morto e sepolto… Inutile perderci altro tempo dietro.
Se hai un sito @TheStylist perchè non condividi con noi gli obiettivi dello stesso e la % di accessi via IE6?
@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 
)
@Lauryn@theStylist non è un discorso di %, un discorso di decidere se (per risparmiare un’ora) si sceglie di presentare un prodotto non ottimale a una fascia di utenti.forse volevi dire theStylist
io condivido la tua opinione 
@Lauryn hai ragione scusa!
@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
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.
@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
Dimenticavo… è un piacere leggere il tuo blog!!
@kiby ultimamente, come vedi, faccio addirittura fatica a scrivere qui. Se scrivi il post ne sono onorato!
@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
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!!
@kiby apri un blog, non fa mai male. Magari parti easy con un tumblr o con blogspot!
Ci penserò sopra!!
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!
Grazie Lauryn, sempre puntuale!