Problema footer con FF e Opera

[yalesh]

Ho un layout dove sotto la barra di navigazione e la sezione con le bandierine ho dei div che contengono a sinistra delle foto (box_foto) e a destra del testo (box_testo), il tutto è all'interno di un div contenitore (box_foto_testo).

Fin qui tutto ok... il problema è il footer che sono riuscito a posizionare con IE ma non con FF e Opera questo è il risultato:

http://www.lalocandailtrovatore.com/2_0/index.asp

Il footer Oltre a non apparire il colore di sfondo non si allinea sotto il container principale (div#container).

Credo di aver fatto tutto correttamente: ho dato height:auto al container, margin-bottom:0 al footer e 100% a height e min-height di htm, body e #container.

Ecco il codice:

<div id="box_foto_testo">
<div id="box_testo">...</div>
<div id="box_foto">[img]img/home_foto_sx.jpg[/img]</div>
<div id="footer"></div>

/*stili per il layout*/
html,body{margin: 0;padding:0; background-color:#fc9}
body{font-family: arial,sans-serif;font-size: 76%;}

html, body, #container {
width:100%;
height:100%;
min-height:100%;
} 

/*Contenitore principale*/
div#container{
position: relative; 
width: 700px; 
height: 723px; 
min-height: 100%;
margin: 10px auto; 
background-color: #F8E9C3;
border: 1px solid #333}

/*Testata*/
div#testata{
background-color:#f90; 
background-image: url("img/bkg_logo.gif");
background-repeat: no-repeat;
margin:0; 
display: inline;
width:700px; 
height:124px}

/*Contenitore di servizio: barra di navigazione, flash, lingue, telefono*/
div#box_service{
background-color:#c60; 
margin:0; 
width:700px; 
height:236px}

/*Box contenente la barra di navigazione*/
div#box_nav{
background-color:#FFDA7F; 
margin:0; 
width:160px; 
height:236px;
float:left
}

/*Menu di navigazione*/
a.tlinks,div.tlinks {
padding-left:25px;
font-weight:700;
}

div.menuselected {
display:block;
border-bottom:1px dashed #CC6600;
background-color:#993300;
background-image:url("img/frec_onsel.gif");
background-position:center left;
background-repeat:no-repeat;
padding-left:25px;
text-decoration:none;
color:#fff;
font-weight:700;
}

div#menulinks {
border:0;
position:relative;
text-align:left;
font-size:10px;
font-family:Verdana,Arial,Helvetica;
width:160px;
line-height:20px;
margin-bottom:2px;
margin-top:0;
font-weight:700;
padding:0;
}

div#menulinks img {
display:block;
}

div#menulinks a {
display:block;
border-bottom:1px dashed #CC6600;
text-decoration:none;
background-image:url("img/puntatore_off.gif");
background-position:center left;
background-repeat:no-repeat;
color:#993300;
font-weight:700;
}

div#menulinks a.selezione {
background-color:#C60;
background-image:url("img/frec_onsel.gif");
padding-left:25px;
color:#F5F1E7;
font-weight:700;
}

div#menulinks a:hover {
background-color:#FF6600;
background-image:url("img/frec_on.gif");
color:#fff;
font-weight:700;
}

/*Animazione flash, foto*/
div#box_flash{
margin:0; 
width:540px; 
height:152px;
float:right; 
}

/*Scelta lingua*/
div#box_lang{
margin:0; 
width:540px; 
height:84px;
background-color:#C60;
float:right
}

div#box_sardmap{
margin:0; 
width:94px; 
height:84px;
border-color:#fc9;
border-style:dashed;
border-width:0 1px 0 0;
}

div#lang_eng{
margin:0; 
padding: 23px 0 23px 0; 
width:60px; 
height:38px;
float:right;
}

div#lang_fra{
margin:0; 
padding: 23px 0 23px 0; 
width:60px; 
height:38px;
float:right;
}

div#lang_deu{
margin:0; 
padding: 23px 0 23px 0; 
width:60px; 
height:38px;
float:right;
}

div#lang_esp{
margin-right:5px; 
padding: 23px 0 23px 0; 
width:60px; 
height:38px;
float:right;
}

div#infoprenotazioni{
margin:0; 
width:177px; 
height:84px;
border-color:#fc9;
border-style:dashed;
border-width:0 0 0 1px;
float:right;
}

.noborder {border: none}

div#box_foto_testo{
background-color:#F8E9C3; 
margin:0; 
width:700px; 
min-height:360px;
}

div#box_foto{
background-color:#FFDA7F; 
margin:0; 
width:160px; 
height:360px;
min-height:360px;
float:right;
}

div#box_testo{
background-color:#F8E9C3; 
margin:0; 
padding:10px 10px 10px 10px;
width:520px; 
height:330px;
min-height:330px;
float:right;
color:#990000;
text-align:justify;
}

/*Footer*/
div#footer{
text-align:center;
width:100%;
height:40px; 
margin-bottom:0; 
background-color:#c60; 
color:#FFFFCC;
font-size:12px;
border-color:#333;
border-style:solid;
border-width:1px 0 0 0;
}
div#footer a{color: #FFFFCC;text-decoration: underline}

[Fulciniti]

La butto lì, magari funziona: prova ad aggiungere un clear:left al footer.
Saluti,
Alessandro

[yalesh]

Originariamente inviato da Fulciniti
La butto lì, magari funziona: prova ad aggiungere un clear:left al footer.

Grazie 1000 fungeee... ad essere esatti clear:right
Se ho ben capito il clear azzera tutti i float, giusto? Boh non è che abbia ben capito cosa ho fatto... comunque grazie.
Mi resta ancora un piccolo scarto di 3px tra il #container e il #footer, credevo fosse un'inezia invece non riesco a risolverlo... anche questa volta solo su FF e opera
http://www.lalocandailtrovatore.com/2_0/index.asp

ecco il codice:

/*Contenitore principale*/
div#container{
position: relative; 
width: 700px; 
min-height:718px;
height:auto !important;
height:718px;margin: 10px auto; 
background-color: #F8E9C3;
border: 1px solid #333}

/*Contenitore foto e testi*/
div#box_foto_testo{
background-color:#F8E9C3;
margin:0;
width:700px;
height:auto !important;
min-height:360px}

div#box_foto{
background-color:#FFDA7F;
margin:0;
width:160px;
height:auto !important;
min-height:360px;
float:right;
}

div#box_testo{
background-color:#F8E9C3;
margin:0;
padding:10px 10px 10px 10px;
width:520px;
min-height:340px !important;
height:340px;
float:right;
color:#990000;
text-align:justify;
}

/*Footer*/
div#footer{
background-color:#CC6600;
color:#FFFFCC;
font-size:12px;
height:40px;
text-align:center;
width:100%;
margin-bottom:0;
clear:right
}

Grazie a chi volesse aiutarmi...

[Fulciniti]

Originariamente inviato da yalesh
Grazie 1000 fungeee... ad essere esatti clear:right
Se ho ben capito il clear azzera tutti i float, giusto? Boh non è che abbia ben capito cosa ho fatto... comunque grazie.

Il clear tipicamente si usa per evitare l'affiancamento di precedenti elementi float, ma in questo caso forza il footer ad essere contenuto nel container. Lettura consigliata:
Float: teoria e pratica .

Per l'altro problema non saprei aiutarti... dovrei rivedere tutto il codice; ma ad essere sincero quella striscia è davvero impercettibile e non compromette la resa.

Saluti,
Alessandro