Hola,
Tengo el siguiente problema con las alturas de capa al 100%.
Con Firefox sólo me hace el 100% del espacio visible, si la página tiene scroll no expande la capa por debajo de ese espacio visible.
¿Has lo grado solucionarlo?, porque yo me estoy volviendo majareta tanto darle vueltas, y ninguno de los hacks ni trucos que encuentro me sirver.
Por favor, pido ayuda encarecidamente. Adjunto enlace, HTML y CSS del meollo:
URL
---
www.can-simo.com/maqueta
CSS
----
Código:
/* ***************
* GENERAL *
*************** */
html, body {
height:100%;
margin:0 auto;
padding:0;
text-align:center;
}
body {
background:#091b06 url("/maqueta/images/common/body_back.gif") top repeat-x;
}
body, h3, p, a {
font:85% 'Trebuchet MS', Arial, Geneva, Verdana, helvetica, sans-serif;
color:#FFF;
}
/* **************
* LAYOUT *
************** */
#pagina {
background:#091b06 url("/maqueta/images/common/pagina_back.gif") top repeat-y;
margin:0 auto;
min-height:100%;
height:100%;
height:auto !important;
text-align:center;
width:800px;
}
#cabecera{
background:#000 url("/maqueta/images/common/cabecera_back.gif") top no-repeat;
height:145px;
font-size:1.2em;
}
#contenido{
width:auto;
padding:23px;
}
#principal {
width: 440px;
float: left;
text-align:left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#lateral {
width: 287px;
float: right;
text-align:left;
color: #555544;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
.separadorHorizontal {
display:block;
background:#000 url("/maqueta/images/common/back_border_central.gif") top repeat-x;
height:1px;
}
/* ************
* LOGO *
************ */
#logoHeightSep {
height:26px;
}
#logo {
background:url("/maqueta/images/common/logo_back.gif") top repeat-x;
width:755px;
margin:0 auto;
}
#logo a,
#logo a:visited {
color:#154505;
font-size:0.70em;
text-decoration:none;
padding:0px 5px 0px 10px;
}
#logo a:hover {
text-decoration:underline;
}
#logo .separator {
background:url("/maqueta/images/common/separator_menu.gif") top repeat-y;
}
/* **********************
* MENU PRINCIPAL *
********************** */
#menuPrincipalHeightSep {
height:18px;
}
#menuPrincipal {
text-align:center;
}
#menuPrincipal a,
#menuPrincipal a:visited {
font-size:0.80em;
color:#FFF;
text-decoration:none;
}
#menuPrincipal a:hover {
text-decoration:underline;
}
#menuPrincipal a.selected {
font-weight:bold;
text-decoration:underline;
}
#menuPrincipal .separator {
background:url("/maqueta/images/common/separator_menu.gif") top repeat-y;
height:13px;
padding:0em .55em;
}
/* **************
* BLOQUE *
************** */
#principal .bloque {
border-bottom:1px dashed #4c4c4c;
padding-bottom:1.5em;
}
#lateral .bloque {
border-bottom:1px dashed #000;
padding-bottom:.4em;
}
.bloque h3 a {
color:#2c8a1c;
font-size:1.2em;
font-weight:bold;
text-decoration:none;
}
#principal .bloque h3 a {
color:#2c8a1c;
}
#lateral .bloque h3 a {
color:#91ae0e;
}
.bloque h3 a:hover {
text-decoration:underline;
}
.bloque p {
font-size:0.80em;
line-height:1.8em;
}
.bloque img {
display:inline;
float:left;
}
#principal .bloque img {
padding:0px 20px 10px 0px;
}
#lateral .bloque img {
padding:0px 10px 5px 0px;
}
.bloque .bloqueEnlace a {
font-size:1em;
cursor:pointer;
text-decoration:none;
}
#principal .bloque .bloqueEnlace a {
color:#91ae0e;
border:#91ae0e dashed;
border-width:0px 0px 1px 0px;
}
#lateral .bloque .bloqueEnlace a {
color:#afd7bd;
border:#afd7bd dashed;
border-width:0px 0px 1px 0px;
}
.bloque .bloqueEnlace a:hover {
text-decoration:none;
}
#principal .bloque .bloqueEnlace a:hover {
border:#000 dashed;
border-width:0px 0px 1px 0px;
}
#lateral .bloque .bloqueEnlace a:hover {
border:#154505 dashed;
border-width:0px 0px 1px 0px;
}
/* ********************
* CAJA LATERAL *
******************** */
#lateral #box {
width:100%;
background-color:#154505;
}
#lateral #boxCornerTL,
#lateral #boxCornerTR,
#lateral #boxCornerBL,
#lateral #boxCornerBR {
height:13px;
width:49%;
}
#lateral #boxCornerTL {
float:left;
background:#154505 url(/maqueta/images/common/box_1_top_left.gif) left no-repeat;
}
#lateral #boxCornerTR {
float:right;
background:#154505 url(/maqueta/images/common/box_1_top_right.gif) right no-repeat;
}
#lateral #boxCornerBL {
float:left;
background:#154505 url(/maqueta/images/common/box_1_bottom_left.gif) left no-repeat;
}
#lateral #boxCornerBR {
float:right;
background:#154505 url(/maqueta/images/common/box_1_bottom_right.gif) right no-repeat;
}
#lateral #boxContent {
width:auto;
padding:20px 20px;
}
HTML
-----
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="es" xml:lang="es" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="author" lang="es" content="Can Simó" />
<title>Can Simó - Labrador Retriever</title>
<link rel="stylesheet" type="text/css" media="screen" href="/maqueta/css/cansimo_test_10.css" />
</head>
<body class="inicio">
<div id="pagina">
<div id="cabecera">
<div id="logoHeightSep"></div>
<div id="logo">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td><img src="/maqueta/images/common/header_1.gif" alt="Can Simó - Labrador Retriever" border="0" /></td>
<td width="100%" align="right" valign="bottom" style="padding-bottom:2px;"><span class="separator"> </span><a href="#">Contactar</a></td>
<td><img src="images/common/header_2.gif" width="7" height="69" border="0" /></td>
</tr>
</table>
</div>
<div id="menuPrincipalHeightSep"></div>
<div id="menuPrincipal"><a href="#" class="selected">Inicio</a><span class="separator"> </span><a href="/cansimo/sobrenosotros.html">Can Simó</a><span class="separator"> </span><a href="/nuestroschicos/rubics.html">Nuestros chicos</a><span class="separator"> </span><a href="/nuestraschicas/aussie.html">Nuestras chicas</a><span class="separator"> </span><a href="#">Camadas</a><span class="separator"> </span><a href="#">Noticias</a><span class="separator"> </span><a href="#">Album fotográfico</a><span class="separator"> </span><a href="/laraza/historia.html">La raza</a><span class="separator"> </span><a href="#">Enlaces</a></div>
</div>
<div id="destacadoCentral"><script language="javascript" type="text/javascript" src="/maqueta/js/embebed/central_home_1.js"></script></div>
<div class="separadorHorizontal"></div>
<div id="contenido">
<div id="principal">
<div class="bloque">
<h3><a href="#">Así es un Larador Retriever, conuslta el standard</a></h3>
<div class="bloqueTexto">
<p><a href="#" style="border:none;"><img src="images/inicio/imagen_borrar_1.jpg" alt="Así es un Labrador Retriever" border="0" /></a>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum eleifend sem at dui. Nulla felis.</p>
</div>
<div class="bloqueEnlace">
<p><a href="#">Consuta el estándar »</a></p>
</div>
</div>
<div class="bloque" style="border:none;">
<h3><a href="#">Antes de compartir tu vida con una moscota conoce qué es la tenencia responsable</a></h3>
<div class="bloqueTexto">
<p><a href="#" style="border:none;"><img src="images/inicio/imagen_borrar_2.jpg" alt="Conoce qué es la tenencia responsable" border="0" /></a>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum eleifend sem at dui. Nulla felis. Integer id lacus. Sed ac sem. Nulla facilisi. Nulla facilisi.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
<div class="bloqueEnlace">
<p><a href="#">Más sobre la tenencia responsable »</a></p>
</div>
</div>
</div>
<div id="lateral">
<div id="box">
<div id="boxCornerTL"></div>
<div id="boxCornerTR"></div>
<div id="boxContent">
<div class="bloque">
<a href="#" style="border:none;"><img src="images/inicio/imagen_borrar_3.jpg" alt="Resultados de la Exposición Internacional de Vic" border="0" /></a>
<h3><a href="#">Resultados de la Exposición Internacional de Vic</a></h3>
<div class="bloqueTexto">
<p>Lorem ipsum dolor sit amet, consectetuer. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
<div class="bloqueEnlace">
<p><a href="#">Leer más »</a></p>
</div>
</div>
<div class="separadorArticulo"></div>
<div class="bloque" style="border:none;">
<h3><a href="#">Abiertas reservas para la nueva camada de Tula y El Niño</a></h3>
<div class="texto">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Vestibulum eleifend sem at dui.</p>
</div>
<div class="bloqueEnlace">
<p><a href="#">Reservar mi cachorro »</a></p>
</div>
</div>
</div>
<div id="boxCornerBL"></div>
<div id="boxCornerBR"></div>
</div>
</div>
</div>
</div>
</body>
</html>