Footer background per FF e IE

**Konrad** · 13-06-2007, 13:46

Ciao a tutti,

sono qui per richiedere il vostro aiuto in merito ad un problemajavascript:void(0);
Piange:

il footer, non riesco a farlo stare in fondo alla pagina, di seguito metto il contenuto per chiarezza:

#footer{
color:#00BFFF;
background:url(../images/footer.gif)no-repeat !important;
background-image:url(../images/footer.gif)no-repeat;
padding-top:38px;
height:38px !important;
height:76px;
width:900px;
bottom:0;
position:absolute !important;
font-size:10pt;
text-align:center;
}

su FF sta in centro ma sale mano a mano che stringo la pagina e non si estende una volta che la allargo, rimane sopra al testo. Mentre su IE 6 non vedo lo sfondo del footer e il testo si posiziona sotto la colonna di destra.

Sapete suggerirmi una soluzione?

Ve ne sarei gratissimo!!!

**Mich_** · 13-06-2007, 15:05

Devi postare anche:
Il codice HTML del footer, del blocco che lo contiene e ricorsivamente fino al <body>
Il codice CSS dei vari blocchi interessati
La DTD (DOCTYPE) usata.

**Konrad** · 13-06-2007, 15:32

Questo l'html:

<body>

<div id="contenitore">

<div id="header">

</div>

<div id="topmenu">
<?php if (mosCountModules( "user3" )) { ?><?php mosLoadModules ( 'user3',-1); ?><?php } ?>
</div>

<div id="contenuti">

<div id="left"><?php mosLoadModules ('left',-3);?></div>
<div id="main"><?php mosMainBody(); ?></div>
<div id="right"><?php mosLoadModules ('right',-2);?></div>
<div id="footer"><?php include_once('includes/footer.php');?></div>

</div>

</div>

</body>

e questo il css:

body{
margin-top:5px;
margin-bottom:0;
padding:0;
font:10pt Verdana, Tahoma, Helvetica, sans-serif;
color:#666666;
background:#A9A9A9 url(../images/background.gif) center repeat-y !important;
background-image:url(../images/background.gif) center repeat-y;
background-color:#A9A9A9;
height:auto;
overflow:auto;
bottom:0px;
text-align:center;
}

#contenitore {
width: 900px;
font:10pt Verdana, Tahoma, Helvetica, sans-serif;
color:#666666;
height: 100%;
margin: 0 auto;
text-align: left;
}

#header {
position: relative;
width:900px;
height:190px;
margin-top:0;
background:#fff url(../images/Top_wpd.gif);
}

#contenuti{
margin:0;padding:0;
width:900px;
height:100%;
margin-top:0;
background-position:top left;
}

#left{
float:left;
width:148px;
height:100%;
font-family:10pt Verdana, Tahoma, Helvetica, sans-serif;
color:#ffffff;
background:url(../images/left_menu.gif);
background-position: bottom;
margin-top:0px;
margin-bottom:0px;padding-top:0px;
}

#main{
float:left;
background:#ffffff;
width:568px !important;
width:603px;
height:100%;
margin:0;
margin-left:0;
padding-top:0;
padding-left:20px;
padding-right:15px;
table-layout:fixed;
overflow:hidden;
}

#right{
float:right;
width:109px !important;
width:149px;
height:auto;
overflow:hidden;
margin:0;
padding-left:20px;
padding-right:20px;
background:url(../images/right_menu.gif);
font-family: Verdana, Tahoma, Helvetica, sans-serif;
font-size:9pt;
color:#FFFFFF;
}

#footer{
color:#00BFFF;
background:url(../images/footer.gif)no-repeat !important;
background-image:url(../images/footer.gif)no-repeat;
padding-top:38px;
height:38px !important;
height:76px;
width:900px;
bottom:0;
position:absolute !important;
font-size:10pt;
text-align:center;
}

**Mich_** · 13-06-2007, 16:09

Il body non ha altezza definta, per cui vene reso "il piu` piccolo possibile".

Prova a mettere height: 100% anche al body.

In tal caso potresti avere problemi con lo scorrimento (se la pagina e` bassa), per cui la scelta dovrebbe essere
min-height: 100%;

Tieni presente che con quel CSS (in particolare con quei posizionamenti) il footer e` inserito direttamente nel body, e non fa parte dei blocchi contenitore e contenuti.

Per approfondimenti:
I posizionamenti assoluti
Capire i posizionamenti relativi

**Konrad** · 14-06-2007, 12:29

Negativo, non funzia....

....mi viene un dubbio...questo è un template per joomla....può essere che questo cms sia intollerante ad alcune regole di css???

:master:

**cali1981** · 14-06-2007, 14:12

Prova a vedere qui http://www.themaninblue.com/experiment/footerStickAlt/

**Konrad** · 14-06-2007, 15:33

Neanche questo funziona..

..il footer sta in basso ma quando stringo la pagina va sopra al contenuto centrale...e quando la riallargo rimane nell'ultima posizione.

Altri suggerimenti?????

**jackweb** · 14-06-2007, 16:58

Secondo me è il posizionamento assoluto...ma non ne sono certo.
Prova a renderlo relativo.
Ciao

**cali1981** · 14-06-2007, 17:06

Ora è relative, ma non sembra cambiato...

**Mich_** · 14-06-2007, 17:12

Tra posizionamento assoluto o relativo non cambia molto. Sono ambedue posizionamenti che non vanno molto d'accordo con gli altri posizionamenti: cioe` creano una specie di blocco alternativo.
In pratica i blocchi posizionati assoluti/relativi e in altro modo non hanno relazione fra loro.

Ma tutto questo e` spiegato bene in quei link che ho postato qualche messaggio sopra.

Discussione: Footer background per FF e IE

Strumenti discussione

Ricerca discussione

Visualizza

Footer background per FF e IE

Permessi di invio