Div che non si allineano (IE6)

[nabozzz]

Ciao a tutti,

stavo per tornare alle care vecchie tabelle... mi sono rotto di verificare il funzionamento del layout su tutti i browser. Pensavo fosse tutto ok... e invece ecco che su IE6 dopo aver risolto problemi di ogni sorta, mi capita che la colonna di destra invece di rimanere affiancata a quella di sinistra mi va a caporiga

Questa è la parte del css incriminata

#rightcolumn div.news_titolo {
width: 220px;
height: 52px;
margin: 0;
padding: 0;
}

#rightcolumn div.news_data {
width: 220px;
height: 21px;
margin: 0;
padding: 0 0 0 9px;
background: url(../images/contenuto/news_data.gif) no-repeat;
color: #fff;
font: 11px/18px Tahoma;
font-weight: bold;
}

#rightcolumn div.news_testo {
width: 208px;
margin: 5px 0 0 0;
padding: 0 12px 0 0;
color: #636363;
font: 11px/18px Tahoma;
}

#rightcolumn div.news_continua {
width: 93px;
height: 21px;
margin: 10px 0 30px 120px;
padding: 0 0 0 9px;
background: url(../images/contenuto/news_continua.gif) no-repeat;
color: #fff;
font: 11px/18px Tahoma;
font-weight: bold;
}

#rightcolumn div.news_continua a {
color: #fff;
text-decoration: none;
}

#rightcolumn div.news_continua a:hover {
text-decoration: underline;
}

#rightcolumn div.profilo_left {
float: left;
width: 490px;
margin: 0;
padding:0;
}

#rightcolumn div.profilo_right {
float: left;
width: 220px;
margin: 0;
padding:0;
} 

e questo l'html

<div id="rightcolumn">
   <div class="box_alto">immagine</div>
   <div class="profilo_left">
      <div class="sezione">Menu</div>
      <div class="contenuto">contenuto</div>
   </div>
   <div class="profilo_right">
      <div class="news_titolo">[img]news.gif[/img]</div>
      <div class="news_data">10/11/07</div>
      <div class="news_testo">[b]sdfsd[/b]</div>
      <div class="news_continua">continua</div>
   </div>
   <div style="clear: both;"></div>
</div> 

Grazie a chiunque.... starei già preparando una tabella...

[nabozzz]

up... vi prego, non costringetemi ad usare le tabelle !!!

[seed_squall_it]

A parte il fatto che tornare alle tabelle sarebbe peggio (sia per te che per gli utenti), ricorda che IE 6 non meriterebbe nemmeno di esistere. La mia speranza è infatti che la gente passi presto a IE 7 o ad altri browser (sicuramente migliori di IE) e che il 6 sparisca dalla faccia della terra.

Detto questo, devi controllare due cose nel tuo layout:

1. Il padding/border/margin che assegni agli elementi va a SOMMARSI alla loro larghezza/altezza, quindi se un elemento è dichiarato con width: 100px e margin: 0 10px, la sua larghezza totale sarà di 120px.

2. Se assegni un margine ad un box sullo stesso lato dichiarato per il float (es.: margin-left e float: left), IE 6 RADDOPPIA tale margine. Quindi devi aggiungere alla regola di quel box la dichiarazione display: inline (che non ha effetto su tutti i browser decenti perché i box flottanti sono sempre implicitamente elementi a livello di blocco, mentre su IE 6 risolve il problema dei margini raddoppiati).

3. Cerca di usare una DTD XHTML Strict 1.0 o quantomeno Transitional 1.0, perché altrimenti IE 6 può metterci "di suo". Inoltre, questo ti assicura una resa abbastanza uniforme su tutti i browser e pensata per il futuro.

4. NON usare DTD XHTML 1.1 e NON inserire nulla prima della dichiarazione della DTD (nemmeno un commento vuoto), perché altrimenti IE 6 entra in quirks mode (modalità compatibile) e interpreta il markup mantenendo la compatibilità col passato (in pratica usa una DTD HTML precedente alla 4.01).

Se le colonne vanno a capo invece di stare affiancate, si tratta sicuramente di un problema nelle loro dimensioni che, sommate, eccedono quelle dell'elemento che le contiene. Puoi anche fare in modo che la somma delle dimensioni delle due colonne risulti inferiore a quella dell'elemento che le contiene e quindi flottarle in direzioni opposte (float: left e float :right). Così ottieni un "franco" tra di loro. Ovviamente poi devi ripulire i float opposti con un clear: both.