Problema div annidati con vecchie versioni di IE (layout a 3 colonne fisso)
Ho un xhtml di questo tipo:
<div id="div1">
<div id="t_1">titolo1</div>
<div id="t_2">titolo2</div>
<div id="t_3">titolo3</div>
</div>
<div id="div2">
<div id="c_1">Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto </div>
<div id="c_2">
<div id="c_2_2">titolo4</div>
<div id="c_2_3">sottotitolo</div>
<div id="c_2_4">Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto </div>
</div>
<div id="c_3">Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto Contenuto </div>
</div>
Il div1 (960px) deve contenere 3 div di dimensioni prefissate la cui somma tra margin, padding, border e width dei vari div (t_1, t_2, t_3) vale esattamente 960px. Con lo stesso principio ho proceduto fin in fondo. Su IE8 non ho problema da per versioni inferiori alla 7 accade il finimondo. Tutto XHTML e i vari CSS sono validati perfettamente. Mi compare sono un avvertimento che non riesco a comprendere:
“The Unicode Byte-Order Mark (BOM) in UTF-8 encoded files is known to cause problems for some text editors and older browsers. You may want to consider avoiding its use until it is better supported.”
Senza riportare tutto il css scrivo qui sotto il modulo di esempio che ho usato per scrivere tutti i div dell’esempio. Come valori di altezza per c_1, c_2, c_3 ho usato la variabile ‘auto’ come per il tag contenitore div2 e via di seguito. c_2_2, c_2_3, c_2_4 sono invece uno sotto l’altro.
MODULO STANDARD CSS
div#t_1 {
line-height:23px;
float:left;
text-align:center;
position:relative;
top:0px;
left:0px;
width:128px;
height:16px;
padding:7px 10px 7px 10px;
margin:10px 5px 0px 20px;
border-width:1px;
border-style:solid;
border-color:#4167E1;
background-color:#4167E1;
background:url(../immagini/ombra.jpg) repeat-x top left;
font:italic 90% Georgia, "Times New Roman", Times, serif;
color:#FFFFFF;
}
In pratica a meno di fronzoli ho usato sempre e solo il tag float. Ho provato anche a togliere o aggiungere il ‘pezzetto’:
position:relative;
top:0px;
left:0px;
a mio avviso inutile ma non ho risolto nulla.
Il layout funziona perfettamente su tutti gli altri browser aggiornati.
Mi consigliate una tecnica che mi permette di costruire il layout in css a mattoncini in modo che possa vedere tutto alla perfezione anche su IE datati?
Mille grazie
P.S.: Il problema sembrerebbe nella larghezza generale del div. In tutti i browser esclusi IE inferiori alla 7 la larghezza é calcolabile nel modo seguente:
width + 2*padding + 2*margin + 2*border=ST
Non é che tutti gli IE inferiori alla 7 calcolano la variabile ST in modo diverso?
Rispondi quotando
