Hola,
tengo el siguiente HTML:
Código:
<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>
Y el CSS que le aplico es este otro:
Código:
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;
}
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??
Gracias de antemano,