Commenti a: IE6: LI height bug

Di: Merlinox

Merlinox — Thu, 07 Jan 2010 09:11:39 +0000

Grazie Lauryn, sempre puntuale!

Di: Lauryn

Lauryn — Wed, 06 Jan 2010 15:49:54 +0000

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!

Di: Google Browsersize è utile?

Google Browsersize è utile? — Fri, 18 Dec 2009 11:27:24 +0000

[...] Web design è anche analisi. Se stiamo facendo il restyling di un sito, la prima cosa da fare è richiedere le statistiche. Questo blog ad esempio a una percentuale inferiore al 2% di navigatori a 800×600: è il caso di considerarli? A voi la valutazione, un po' come abbiamo fatto per Internet Explorer 6! [...]

Di: kiby

kiby — Wed, 16 Dec 2009 14:30:32 +0000

Merlinox :
@kiby apri un blog, non fa mai male. Magari parti easy con un tumblr o con blogspot!

Ci penserò sopra!!

Di: Merlinox

Merlinox — Wed, 16 Dec 2009 14:26:22 +0000

@kiby apri un blog, non fa mai male. Magari parti easy con un tumblr o con blogspot!

Di: kiby

kiby — Wed, 16 Dec 2009 14:19:14 +0000

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!!

Di: Merlinox

Merlinox — Wed, 16 Dec 2009 14:13:32 +0000

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

Di: kiby

kiby — Wed, 16 Dec 2009 14:10:18 +0000

@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

Di: Merlinox

Merlinox — Wed, 16 Dec 2009 14:00:31 +0000

@kiby ultimamente, come vedi, faccio addirittura fatica a scrivere qui. Se scrivi il post ne sono onorato!

Di: kiby

kiby — Wed, 16 Dec 2009 13:59:51 +0000

Dimenticavo… è un piacere leggere il tuo blog!!

Di: kiby

kiby — Wed, 16 Dec 2009 13:59:05 +0000

@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

Di: Merlinox

Merlinox — Wed, 16 Dec 2009 13:45:38 +0000

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.

Di: kiby

kiby — Wed, 16 Dec 2009 13:41:08 +0000

@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

Di: Merlinox

Merlinox — Wed, 16 Dec 2009 12:49:05 +0000

@Lauryn hai ragione scusa!

Di: Lauryn

Lauryn — Wed, 16 Dec 2009 12:16:17 +0000

forse volevi dire theStylist io condivido la tua opinione

Di: Merlinox

Merlinox — Wed, 16 Dec 2009 11:51:54 +0000

~~@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.

Di: Lauryn

Lauryn — Wed, 16 Dec 2009 11:37:09 +0000

@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 )

Di: Merlinox

Merlinox — Wed, 16 Dec 2009 11:19:57 +0000

Se hai un sito @TheStylist perchè non condividi con noi gli obiettivi dello stesso e la % di accessi via IE6?

Di: TheStylist

TheStylist — Wed, 16 Dec 2009 11:15:44 +0000

IE6 è morto e sepolto… Inutile perderci altro tempo dietro.

Di: Arquen

Arquen — Wed, 16 Dec 2009 11:11:23 +0000

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.

Di: Merlinox

Merlinox — Wed, 16 Dec 2009 10:29:06 +0000

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?

Di: Lauryn

Lauryn — Wed, 16 Dec 2009 10:27:01 +0000

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?

Di: Merlinox

Merlinox — Wed, 16 Dec 2009 09:23:30 +0000

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?

Di: Arquen

Arquen — Wed, 16 Dec 2009 09:12:30 +0000

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.

Di: Merlinox

Merlinox — Mon, 14 Dec 2009 08:45:25 +0000

@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.

Di: DoZ

DoZ — Sun, 13 Dec 2009 07:53:37 +0000

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?

Di: DoZ

DoZ — Sun, 13 Dec 2009 07:28:04 +0000

Bravo, buono a sapersi

Di: Merlinox

Merlinox — Fri, 11 Dec 2009 08:58:46 +0000

@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!

Di: DesMM

DesMM — Fri, 11 Dec 2009 08:57:11 +0000

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.

Di: Merlinox

Merlinox — Wed, 09 Dec 2009 13:09:51 +0000

@Joel sicuramente sempre meglio usare controlli lato server, quando è possibile e quando c'è un'azione che non è sincrona. Ottimo consiglio.

Di: Joel

Joel — Wed, 09 Dec 2009 13:07:53 +0000

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