Hola gente:
Acabo de descubrir que mis div no se alinean bien verticalmente en FF, pero que sin embargo todo va genial con IE, aquí va el código.
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.