Non riesco a far stare allineato in fondo alla pagina il footer della mia pagina. In Explorer viene visualizzato un po' più su di quanto dovrebbe, in Firefox viene visualizzato sovrapposto all'header.
Credo sia una sciocchezza, ma non riesco a trovare l'errore.
Questo è il css (lo so, per ora è molto sporco, devo ripulirtlo):
/* CSS Document */
htmkl, body {
font-family: "Tahoma", Verdana, Arial, Helvetica, sans-serif, "Trebuchet MS";
height: 100%;
margin:0;
padding: 0;
}
body{font-size: 76%;}
div#container{
margin: 0 auto;
width: 800px;
height:auto;
position: relative;
padding-bottom:50;
}
div#header{
width:800px;
height:200;
}
div#menu_up{
width:800px;
height:20px;
background-color: #666699;
font-weight: bold;
text-align: right;
background-image: url(img/menu_up.jpg);
}
div#menu_up a{
color:#FFFFFF;
margin-right: 5px;
margin-left: 5px;
text-decoration: none;
}
div#menu_up a:hover{
color:#FFFF99;
}
div#corpo{
height: 100%;
}
div#menu_lat{
float:left;
width: 180px;
background-image: url(img/menu_lat.jpg);
}
div#menu_lat a{
text-decoration:none;
display: block;
margin-left: 10px;
margin-bottom: 2px;
color: #666666;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #666666;
margin-right: 10px;
font-size: 90%;
}
div#menu_lat a:hover{
color: #69B2C3;
}
div#menu_lat a.sezione{
font-weight:bold;
margin-left: 5px;
margin-top: 15px;
margin-bottom: 2px;
color: #FF9900;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #666666;
}
div#menu_lat a.sezione:hover{
color: #6666FF;
}
div#corpo_dx{
width:620px;
height:100%;
float: right;
}
div#menu_lat_dx{
float:right;
width: 180px;
background-image: url(img/menu_lat_dx.jpg);
}
div#menu_lat_dx a{
font-weight:bold;
text-decoration:none;
display: block;
margin-left: 20px;
margin-top: 3px;
margin-bottom: 5px;
color: #666666;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #666666;
margin-right: 15px;
}
div#menu_lat_dx a:hover{
color: #69B2C3;
}
div#menu_lat_dx a.sezione{
margin-left: 10px;
margin-top: 15px;
margin-bottom: 2px;
color: #FF9900;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #666666;
}
div#menu_lat_dx a.sezione:hover{
color: #6666FF;
}
div#centro{
float:left;
width:440;
}
div#footer{
height:50px;
clear:both;
margin-bottom:0;
position:absolute;
bottom:0;
width:100%;
border-top-style: solid;
border-top-color: #666699;
border-top-width: thin;
}
Questo è la struttura della pagina:
<body>
<div id="container">
<div id="header">
</div>
<div id="menu_up">
</div>
<div id="corpo">
<div id="menu_lat">
</div>
<div id="corpo_dx">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
Grazie mille per l'aiuto
Rispondi quotando