spazio vuoto sotto footer

[whiteduke]

Salve a tutti,

volevo chiedere il vostro aiuto circa un problema che mi è sorto durante la costruzione di un sito. Sotto il footer si crea una liena bianca che non riesco a colmare. Ciò si presenta solo con ie e non con firefox. questo è il css:

#footer{
text-align:center;
padding: 5px 0px;
background-color: #630;
color: #000;
position: absolute;
bottom: 0;
width: 100%;
}

Allego foto.
Grazie e ciao

[pierofix]

Hai già provato a impostare anche il margin pari a zero?

[whiteduke]

ora si ma non cambia niente
devo precisare anche che se faccio f11 con ie ossia lo ingrandisco a tutta pagina questo problema non compare!

[zoom]

footer con position absolute bottom?
non è un po' troppo rischioso?

comunque, hai provato a settare a 0 i margini anche di html e body? IE a volte da problemi per quello...

[whiteduke]

provando prima ho inserito margin: 0; anche in body ed è sparito lo spazio vuoto. grazie comunque. il footer funziona regolarmente. quando pubblicherò chiederò anche vostro parere essendo questo il mio primo sito in xhtml e css. ciao

[zoom]

bene, ma ti ripeto.
sicuro sia una soluzione non rischiosa usare il position absolute bottom per un footer? :master:

[whiteduke]

e cosa mi consigli di fare?

[zoom]

dipende dalla struttura, in alcuni casi può essere corretto.
in altri può essere una follia.
se la struttura regge allora va bene anche così, ma io preferisco sempre mettere un div footer semplicemente sotto a tutti gli altri.

messo così senza che il resto del sito sia adattato all'esigenza è pericoloso perhcè se il testo contenuto nel sito è maggiore dello spazio dello schermo il footer gli andrà sopra e rimarrà sempre sopra il testo, e non è una bella cosa

[whiteduke]

queto è il codice css:
/* CSS */
html,body{
margin: 0;
padding: 0;
border: 0;
height: 100%;
}

body{
font-family: arial,sans-serif;
font-size: 12px;
text-align: justify;
margin: 0;
border: 0;
}

body>#container{height: auto; min-height: 100%}

#container{
position: relative;
width: 960px;
\width: 980px;
w\idth: 960px;
height: 100%;
margin: 0px auto;
border-left: 2px solid #630;
border-right: 2px solid #630;
}

#intro {
margin: 0px auto;
text-align: center;
border: 0;
}

#footer{
text-align:center;
padding: 5px 0px;
background-color: #630;
color: #000;
bottom: 0;
width: 100%;
margin: 0;
position: absolute;
}

/* stili specifici per layout */

h1,h2{
margin: 0;
padding:0;
}

h2{
color: #666;
font-size: 1.5em;
}

h4{
font-weigth: bold;
color: #666;
}

p{
font-size: 12px;
}

ul{
font-size: 12px;
}

li{
line-height: 25px;
}

hr{
noshade;
width: 170px;
color: #666666;
size: 1px;
}

#footer a{
color: #fff;
font-weight: bold;
text-decoration: underline;
font-family: arial,sans-serif;
font-size: 12px;
}

#logo{
background: url(../images/logomybio.jpg) no-repeat top;
margin: 0;
padding: 0;
height: 102px;
text-align: left;
}

#logo img{
float: left;
padding: 3px 30px;
margin: 0;
border:0;
}

#content{
padding: 2em 15px;
text-align: justify;
border: 0;
margin: 0;
height: auto;
}

come è possibile risolvere il problema del "footer: absolute" da cui avevo tratto spunto qui?:
http://www.html.it/layout_css/layout_css_15.htm

Grazie

[zoom]

prova così:

#footer{
text-align:center;
padding: 5px 0px;
background-color: #630;
color: #000;
width: 100%;
margin: 0;
clear:both;
}