tengo el siguiente HTML:
Código:
Y el CSS que le aplico es este otro:<div id="container"> <div id="header"> <h1>Titulo</h1> </div> <div id="menu"> <ul> <li><a href="internacional.htm">Internacional</a></li> <li><a href="espana.htm">España</a></li> <li><a href="economia.htm">Economía</a></li> <li><a href="ciencia.htm">Ciencia/Tecn.</a></li> <li><a href="deportes.htm">Deportes</a></li> <li><a href="espectaculos.htm">Espectáculos</a></li> <li><a href="salud.htm">Salud</a></li> </ul> </div> <div id="content"> Contenidos<br> Contenidos<br> Contenidos<br> Contenidos<br> Contenidos<br> Contenidos<br> Contenidos<br> Contenidos<br> Contenidos<br> </div> <div id="footer"> <h6>Pie de pagina</h6> </div> </div> </body> </html>
Código:
El problema que tengo es que el div "content" le pongo altura 100% y un borde a la izqda para separar el contenido del menu. En IE6 va perfecto, pero en cambio en firefox queda como un salto de linea entre esta capa y la capa "footer", no le aplica la altura 100% como debería. Alguien sabe xq pasa esto??body { font: 12px/16px verdana, helvetica, arial, sans-serif; color: #555; margin: 0px; padding: 0px; text-align:center; } #container { margin: 0px auto 0px auto; padding: 0px; width:760px; text-align:left; background-image:url(fond.gif); background-repeat:repeat-y; } #header { height: 110px; background-image:url(logo.png); background-repeat:no-repeat; } #header h1 { display:none; } #menu { width:130px; float:left; } #menu ul { list-style-type:none; margin:10px; padding:0; } #menu li { margin:5px; padding:0; } #menu a{ padding-left:25px; background: url(link_menu.gif) no-repeat; text-decoration:none; } #content { height:100%; margin-left: 150px; padding: 10px; border-left: 1px dashed #CCCCCC; min-height:250px; } #footer { margin:0px; padding:0px; height: 25px; background-image:url(pie.gif); background-repeat:repeat-x; } #footer h6 { padding-left:25px; padding-top: 5px; color:#DEDEDE; font-size:10px; font-style:normal; }
Gracias de antemano,