Prima di aprire questo topic mi sono spulciato gran parte dei problemi già segnalati non trovando però soluzione al mio.
Ho compreso che è IE a fare casini con CSS e difatti sin dall'inizio ho programmato la pagina per Firefox cercando poi di adattarla. Fatto sta che ora funziona perfettamente con Explorer ma da un problema con Firefox. Veniamo al dunque:
ho creato una pagina html solo con i div così costituita
codice:
<body>
<div class="header">[img]logo3.jpg[/img]</div>
<div class="rigasup">
<span class="rigasupa">home</span>
<span class="rigasupb">ultimo aggiornamento: 21 giugno 2005</span>
</div>
<div class="corpo">
<div class="corposx">
<div class="menu">
testo
</div>
<div class="main">
testo
</div>
</div>
<div class="dx">testo
</div>
</div>
<div class="rigainf"></div>
<div class="foot">
<div class="foota">testo</div>
<div class="footb">testo</div>
</div>
</body>
e relativo css:
codice:
html,body{
margin:0 auto;
padding:0;
width:700px;
}
body {
font: 100.01% "Trebuchet MS",Verdana,Arial,sans-serif;
text-align:center;
}
a:link, a:visited {
text-decoration: none;
color: #000;
}
a:active {
text-decoration: none;
}
a:hover {
background-color: #8BB6D8;
text-decoration: none;
color: #FFFFFF;
}
.header { width:700px; margin: 0; padding: 0; }
.rigasup {
font-size: 10px;
height: 10px;
border: 2px solid #000000;
background-color: #2B5B81;
}
.rigasupa {
font-variant: small-caps;
color: #FFFFFF;
float: left;
}
.rigasupb {
color: #FFFFFF;
float: right;
}
.corpo {
height: 236px;
margin-top: 5px;
background-image: url(sfondo2.gif);
background-attachment: scroll;
background-repeat: no-repeat;
background-position: bottom;
}
.corposx {
width: 550px;
float: left;
}
.menu {
text-align:left;
float: left;
padding: 5px;
white-space: nowrap;
width: 120px;
}
.main {
width: 395px;
float: right;
overflow: visible;
}
.dx {
width: 120px;
float: right;
font-size: 9px;
text-align: center;
}
.rigainf {
font-size: 10px;
height: 10px;
border: 2px solid #000000;
background-color: #C6070F;
}
.foot {
width: 700px;
margin-top: 2px;
}
.foota {
width: 440px;
float: left;
font-size: 9px;
text-align: left;
padding-left: 2px;
}
.footb {
width: 250px;
float: right;
font-size: 9px;
text-align: right;
padding-right: 2px;
}
.menu a, .menu a:link, .menu a:visited {
display:block;
text-decoration:none;
padding-left: 5px;
color: #009;
}
.menu a:hover, .menu a:active {
background-color: #FBA29F;
border-right-style: solid;
border-right-color: #2B5B81;
border-right-width: 5px;
} /* colori per l'effetto roll-over */
il problema è il seguente.
La parte centrale contiene del testo che se è più lungo del box stesso fa allungare la pagina verso il basso spostando quindi i footer. Questo solo con IE e non con Firefox. Ebbene io vorrei proprio che fosse Firefox a cambiare "atteggiamento" e a prolungarmi la pagina. Invece quest'ultimo mi lascia i footer fissi e continua sotto di loro. Ho provato a togliere l'height del "corpo" e del "main" ma in tal caso il footer si ritrova sotto la rigasup.
qualche consiglio? tnx