Hola gente:
Aún no he averiguado porque cuando coloco div verticalmente en FF siempre hay un espacio entre ellos (algo asi como un margen) aun cuando las propiedades margin y padding están a cero.
Os dejo nuevamente mi código y espero que alguien me pueda ayudar en esto.
HTML
Código:
<div id="container"> ... </div>
<div id="pageHeader"> ... </div>
<div id="menu"> ... </div>
<div id="mainBody"> ... </div>
<div id="footer"> ... </div>
CSS
Código:
html{
height: 100%;
}
body{
height: 100%;
background: #4677EE url(img/main_Bg.jpg) repeat-x top;
margin: 0px 0px 0px 0px;
font: 0.8em/1.6 Tahoma, Arial, Helvetica, sans-serif;
color: #FFFFFF;
}
/* specific divs */
/* -- Container --*/
#container{
display: block;
width: 800px;
min-height: 100%;
background: url(img/containerBg.gif) repeat-y;
margin: 0 auto;
/*border: #FFFFFF solid medium;*/
}
* html container{
height:100%;
}
#pageHeader{
display: block;
width: 710px;
height: 56px;
background: url(img/header.gif) no-repeat center;
margin: 0px 0px 0px 84px;
}
....
El resto de los div son más o menos del mismo estilo.
Pues bien, resulta que si al div container le descomento la opcion "border" entonce se situa junto en el top de la ventana, pero si comento esta opción aparece un espacio entre el top del navegador y la primera imagen que se muestra en container, es decir, el container no está situado exactamente en el top de la ventana.
Creo que el problema se debe al div "header" ya que con el resto de los div "menu, mainBody, footer" tengo el mismo problema, el dichoso espacio.
Ya he probado
en todos los div, pero aun así no funciona.
¿Que es lo que no estoy haciendo bien?
Muchas gracias, y saludos.