beh .. opera c'e' anche per Windows e Linux.
Per Mac dovresti guardare Safari ..pero' vabbe' .
Dunque,
il discorso e' questo:
con i <div> non se ne esce.
Ho prevato 400 hack diversi, dal 100% sul body al 100% sull'html all'uso di javascript.
E' un macello.
Firefox assegna sempre e comunque la prima altezza definita nei contenitori padri a risalire.
Quindi
<div nonno>
<div padre>
<div figlio>
<div nipote>
se nessuno tra nonno e filio ha un'altezza fissata, in firefox
height: 100% diventa sempre height: auto.
non se ne esce.
Pero', spulciando il codice, ho trovato una cosa strana:
Il layout e' fatto cosi':
[Colonna di Sinistra] [Contenuti [colonna di destra]]
con colonna sx fatta con un div e contenuti e colonna di destra fanno parte di una tabella.
Quindi,
rendendo il layout in questo modo:
[ [Colonna sinistra] [contenuti] [colonna detra] ]
e mettendo lo stile sui 3 TD, arrivano fino in fondo.
Il problema che ne nasce e' pero' quello di riassegnare la larghezza alla tabella, perche' prima teneva conto del DIV a sinistra che ora non c'e' piu'.
Quindi:
Modifiche HTML:
<div id="content_inner">
<table border="0" cellpadding="0" cellspacing="0" width="100%" class="content_table_outer">
<tr valign="top">
<td style="background-color: red;">
<div id="left_inner">
<?php mosLoadModules ( 'left' ); ?>
</div>
</td>
<td>
<?php if ( mosCountModules ('banner') ) { ?>
<div class="banner_outer">
<div class="banner_inner">
<?php mosLoadModules( 'banner', -1 ); ?>
</div>
</div>
<?php } ?>
<table border="0" cellpadding="0" cellspacing="0" class="content_table_inner">
<?php if ($colspan > 0) { ?>
<tr>
<td width="100%" colspan="<?php echo $colspan; ?>">
<table class="user_mods" align=-"left" border="0" cellpadding="0" cellspacing="0" width="100%">
<?php if ($colspan > 0) { ?>
<tr>
<?php if ( $user1 > 0 ) { ?>
<td class="user1_outer">
<div class="user1_inner">
<?php mosLoadModules ( 'user1' ); ?>
</div>
</td>
<?php } if ( $colspan == 3) { ?>
<td width="2">
<img src="<?php echo $mosConfig_live_site;?>/templates/<?php echo $cur_template; ?>/images/spacer.png"
alt="" title="spacer" border="0" height="10" width="2"/>
</td>
<?php }
if ( $user2 > 0 ) {
?>
<td class="user2_outer">
<div class="user2_inner">
<?php mosLoadModules ( 'user2' ); ?>
</div>
</td>
<?php } ?>
</tr>
<?php } ?>
</table>
</td>
</tr>
<?php } ?>
<tr>
<td colspan="<?php echo $colspan; ?>" class="body_outer">
<?php mosMainBody(); ?>
</td>
</tr>
</table>
</td>
<?php if ( mosCountModules( 'right' ) ) { ?>
<td class="rightside">
<div id="right_outer">
<div id="right_inner">
<?php mosLoadModules ( 'right' ); ?>
</div>
</div>
</td>
<?php
}
?>
</tr>
</table>
</div>
</div>
<div class="clr"></div>
</div>
</div>
se noti vengono caricati i left dentro alla tabella mentre nell'originale erano fuori.
[css]
C'e' da aggiungere 165 ai width segnati su #content_outer: sono 2, uno con important e uno senza perche' IE6 ignora l'attributo !important.
C'e' da assegnare la larghezza fissa al td dove vengono caricati i left ( larghezza che va a 165 )
Altra cosa:
L'altezza giusta e' quella del TD non quella dei div.
Quindi il bordo va assegnato ai primi e non ai secondi, altrimenti il comportamento e' lo stesso.
Per ottenere la "separazione" tra le colonne chiaramente si usano le solite tecniche che si usano per le tabella.
Ringraziamo quindi i CSS e la mancata standardizzazione dei DOM per l'ennesima volta.
