HEIGHT en FireFox!!!

Hola!

tengo un problema con una web que estoy haciendo en css que tiene varias secciones con colores de fondo diferentes. si en cualquiera de ellas aumento el contenido... ese color de fondo en firefox me desaparece!!

he probado con el min-height (quizá no sepa utilizarlo bien..), poniendo los estilos en línea.. pero nada.. no se si tengo que utilizar algun hack o algo...

si alguien sabe como resolver este problema se lo agradecería mucho.

Gracias,

link? código?

por favor, cuando escribas un problema usa la cabeza. no somos adivinos ni mucho menos. a primeras, establecer una altura en firefox podría parecer un problema, pero es una cualidad; ie es el que hace lo que le da su gana.

Crea que se a que te refieres pero pon el codigo para aclararlo

El problema lo tengo por que la web es administrada, lo que quiere decir que el cliente puede meter tanto texto como le de la gana...(el texto que pongo abajo es un ejemplo)

El codigo en el aspx es este:

<div id="contenido_proyecto">
<div class="txt_serv">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas lacinia est vel nisi. Sed odio eros, vestibulum sed, tincidunt at, facilisis eget, est.
</div>
</div>

Y el codigo en la hoja de estilos es este:

#contenido_proyecto
{
width:760px;
background-color:#143D63;
background-image:url../images/esq_cont/esq_proyecto.jpg);
background-position:top right;
background-repeat:no-repeat;
padding-left:10px;
/*min-height:100%;
height:auto !important;
height:100%;*/
}
*html #contenido_proyecto
{
height:100%;
}
Tambien tengo este hack que mire por internet.. que la verdad no se si sirve de mucho..

/* hacks varios, adivinen para q browser… */

html, body, #pagina
{
/*min-height: 100%; /* alto minimo FF y Safari */
width: 100%;
/*height: 100%; /* alto minimo para IE Windows */
margin: 0;
padding: 0;
min-height:100%;
height:auto !important;
height:100%;
}

html>body #contenedor {
height: auto; /* con este hack escondemos el min-height de IE*/
}
/* fin hacks varios */

y eso es todo, es muy sencillo pero me estoy volviendo loco.. no se porque cuando aumento ese texto el color de fondo desaparece en firefox.
Siento no haber puesto el codigo antes, es la primera vez que escribo a un foro pidiendo ayuda..
Gracias!

Hola FireStorm,

Tengo el mismo 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
----
[url]www.can-simo.com/maqueta[/url]

CSS
----
[code]
/* ***************
* 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;
}
[/code]


HTML
-----
[code]
<!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&oacute; - Labrador Retriever" border="0" /></td>
<td width="100%" align="right" valign="bottom" style="padding-bottom:2px;"><span class="separator">&nbsp;</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">&nbsp;</span><a href="/cansimo/sobrenosotros.html">Can Simó</a><span class="separator">&nbsp;</span><a href="/nuestroschicos/rubics.html">Nuestros chicos</a><span class="separator">&nbsp;</span><a href="/nuestraschicas/aussie.html">Nuestras chicas</a><span class="separator">&nbsp;</span><a href="#">Camadas</a><span class="separator">&nbsp;</span><a href="#">Noticias</a><span class="separator">&nbsp;</span><a href="#">Album fotográfico</a><span class="separator">&nbsp;</span><a href="/laraza/historia.html">La raza</a><span class="separator">&nbsp;</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&iacute; 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 &raquo;</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 &raquo;</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 &raquo;</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 &raquo;</a></p>
</div>
</div>
</div>
<div id="boxCornerBL"></div>
<div id="boxCornerBR"></div>
</div>
</div>

</div>
</div>
</body>
</html>
[/code]

Pon esto en la pagina de estilos...

Código :

body { height:100%; }

espero te sirva.