CSS – Height e Min-Height

Nel blog fino ad oggi, a chi utilizzava Internet Explorer 6 su windows, scomparivano in fase di caricamente, il titolo e il sottotitolo nel top del sito (fondo arancione).
Dopo mille imprecazioni ho capito che era un problema di rendering dell’altezza del DIV da parte di IE.
Come risolverlo?
Nel CSS, nel DIV interessato a questo problema (devo ancora capire il perchè) inserire questa definizione (suppondiamo che l’id sia TOP):

#top{
height:auto !important;
height: 1%;
}

Il primo (letto da Firefox) permette di impostare l’altezza automaticamente, ma soprattutto evita a Firefox di prendere effettivamente la dimensione di 1%, che invece serve a Internet Explorer per fare il rendering 🙁

 


Purtroppo la lotta per lo sviluppo di un sito compatibile su tutti i browser è sempre molto, molto difficile: non essendoci uno standard de-iure da rispettare, tutto è un po’ casuale o in mano ai poteri.
Anche per i CSS vale la stessa cosa purtroppo e alcuni attributi funzionano relativamente.
E’ il caso dell’utile min-height che permette di dare una misura minima di altezza ad un box, ma che non è supportato da IE.
La soluzione di ConStile è la seguente:
.box {
min-height: 200px; /* attributo non supportato da IE */
height: auto !important; /* anche !important non è supportato da IE, ma sugli altri permette di dare priorità ad una doppia dichiarazione */
height: 200px; /* per IE */
}

Loading Facebook Comments ...

Un pensiero su “CSS – Height e Min-Height

  1. Pingback: IE6: LI height bug

Lascia un commento

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