Autoajuste mal en FF bien en IE

gutiw · #1 (**permalink**) 06/01/2006, 22:00

Hola, tengo varias capas dispuestas como las filas de una celda, en cada capa va una imagen y quisiera que las capas se autoajustaran a la altura de las imágenes, cuya altura es variable, por lo que no puedo poner una medida fija en pixeles.
En Explorer funciona bien, tanto con height: 100% como con height: auto, se ajustan al contenido, en cambio en Firefox no, la imagen se sale por debajo de la capa.
¿Cómo debo hacerlo? no pongo el código porque es larguísimo, pero si hiciera falta, lo edito un poco y lo pongo.
Muchas gracias.

webosiris · #2 (**permalink**) 06/01/2006, 22:27

probá sin ponerle height... no creo que sea problema de firefox, mas bien suena a un problema de tu código... ¿no tenés algún lado en donde se pueda ver online?

gutiw · #3 (**permalink**) 06/01/2006, 23:45

Hola, gracias por contestar, me ha pasado otra vez, me ha vuelto a dar error al enviar la respuesta y esta vez la he perdido.
He subido los archivos al servidor, pero cuando le pongo la direccion me da error 404, no entiendo qué pasa.
Te pongo el código editado.

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
	
</head>

<body>


<div class="cabecera">	
</div> 
<div class="subCabecera">
</div>
<div id="motioncontainer" 
</div>
</div>
<div id="otraRevista">
  
</div>
 
<!-- abre barra navegación superior -->

<div id="navSup">
    <div class="contenedorNavListSuperior"> 
</div>
</div>
<div id="contenedor">
<div id="navcontainer">
</div>
 <div id="navBeta">


<!-- aquí el contenido principal -->

AQUI ES DONDE ESTÁ EL ERROR

<div class="content">
	<h1>PACIFIC HOTELS    </h1>
	<h2>NOMBRE LOCALIDAD </h2>
<div><img name="imagen" src="" width="150" height="96" alt="">
	<h3>nombre negocio</h3>
	<p>31 habitaciones.<br>
	TEMPORADA ALTA 1 Nov. - 30 Abr. $ 79-135 c/ desy. + i.v. <br>
	TEMPORADA BAJA 1 Mayo. - 31 Oct.$ 72-130 c/ desy. + i.v. <br>
	Tel: (506) 223-1206 Fax: (506) 257-3637
	www.hotelfleurdelys.co</p>
</div>
<div><img name="imagen" src="" width="150" height="96" alt="">
	<h3>nombre negocio</h3>
	<p>31 habitaciones.<br>
	TEMPORADA ALTA 1 Nov. - 30 Abr. $ 79-135 c/ desy. + i.v. <br>
	TEMPORADA BAJA 1 Mayo. - 31 Oct.$ 72-130 c/ desy. + i.v. <br>
	Tel: (506) 223-1206 Fax: (506) 257-3637
	www.hotelfleurdelys.co</p>
</div>


SIGUEN VARIOS DIV IGUALES 	

</div> 
<div class="pie">
</div>
</div>
</body>
</html>

CSS

Código:

body {
	padding:0px;
	background-color: #000;
}
/* .................................................*/

h1 {
    font: bold 135% Arial, Helvetica, sans-serif ;
	color:#360;
	background-color: #fc6;
	text-align: center;
	margin-top: 0px;
}
h2 {
	font: bold 120% Arial, Helvetica, sans-serif;
	color:#033;
	margin-top: -5px;
	margin-bottom: 5px;
}

h3 {
	color: #033;
	font-family:Arial, Helvetica, sans-serif;
	margin-top: -5px;
	margin-bottom: 3px; /* arreglo para Mozilla */
	margin-left: 160px;

a {
	color:#FFF;
	font-size:11px;
	font-family:verdana, arial, helvetica, sans-serif;
	font-weight:600;
	text-decoration:none;
}
a:link {
    color:#09c;
}
a:visited {
    color:#07a;
}
a:hover {
    background-color:#eee;
}


/* ...................................................*/
#cabecera{
	margin:10px 0px 20px 0px;
	height:110px; 
	border-style:solid;
	border-color:#FFF;
	border-width:1px 0px; 
	line-height:11px;
	voice-family: "\"}\"";
	voice-family:inherit;
	height:110px;
	background-color: #000;
}

/* abre cabecera */

.cabecera{
	margin:10px 0px 20px 0px;
	height:110px;
	border-style:solid;
	border-color:#FFF;
	border-width:1px 0px; 
	line-height:11px;
	voice-family: "\"}\"";
	voice-family:inherit;
	height:110px;
	background-color: #000;
}
#cabecera img {
	float: left;
}

/*cierra cabecera*/

/* ............................................................. */
/*abre sub-cabecera*/

.subCabecera{
	margin:0 auto 15px;
	padding:5px 20px 5px 20px;
	background-color: #000;
	height: 50px;
	border-style:solid;
	border-color:#FFF;
	border-width:1px 0px; 
	width: 156px;
}

/*cierra sub-cabecera*/

/* ......................................................... */
/*abre vinculo a la otra revista*/

#otraRevista {
	color: #FFF;
	text-align: center;
	margin-bottom: 10px;
	font: bold 80% arial, helvetica, sans-serif;
}
#otraRevista a {
	font-weight: bold;
	color: #FFF;
	text-decoration: none;
}
#otraRevista a:hover{
	color: #3cf;
}

/*cierra vinculo a la otra revista*/

/* ........................................................... */
/* abre navegación superior*/
#navSup  {
	height: 25px;
}
.contenedorNavListSuperior{
	width: 500px;
	margin: 0 auto;
	height: 30px;
}
#navlist li{
	display: inline;
	list-style-type: none;
}


#navlist a {
	font: bold 75% Arial, Helvetica, sans-serif;
	padding: 3px 10px;
	letter-spacing: .1em;
 }
#navlist a:link, #navlist a:visited {
	color: #fff;
	background-color: #036;
	text-decoration: none;
}
#navlist a:hover
{
color: #fff;
background-color: #369;
text-decoration: none;
}

/*cierra navegación superior*/

/* ............................................................. */
#contenedor{
	width: auto;
	margin-top: 10px;
}
#contenedor .content p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 75%;
}
.content {
	margin:0px 165px 20px 150px;
	padding:15px 15px 20px 15px;
	background-image: url(../activos/imagenes/fondos/papel.gif);
	height: 100%;
	width: auto;
}
#contenedor .content div {
	width: auto;
	padding: 5px 5px 5px 0;
	border-style: solid;
	border-color: #999;
	border-width: 1px 1px 1px 0;
	margin-bottom: 10px;
	height: 100%;
}
#contenedor .content img {
	float: left;
	border: 1px solid #000;
	margin-right: 10px;
	margin-bottom: 5px;
}
/* ......................................................... */

/*abre sección anuncios resaltados de la derecha*/

#navBeta {
	width:150px;
	voice-family: "\"}\"";
	voice-family:inherit;
	float: right;
}
#contenedor #navBeta img {
	margin: 0 0 10px 0;
	border: 1px solid #fff;
}

/*cierra sección resaltados*/

/* ............................................................ */
#galeria {
	width: 600px;
	margin: 0 auto 20px;
}
#galeria img {
	margin: 0 auto;
	text-align: left;
}
#motioncontainer a img{ 
    border: 1px solid #ccc;
}
#motioncontainer a:hover img{ 
    border: 1px solid navy;
}
#motioncontainer a:hover{
    color: red; 
}
#statusdiv{
   padding: 2px;
   background-color: #FFC;
   border: 1px solid gray;
   visibility: hidden;
}
/* abre navegación izquierda */

#navcontainer {
	width: 135px;
	float: left;
}
#navcontainer ul
{
	padding-left: 0;
	list-style-type: none;
	margin-left: 0;
	margin-top: 0;
}
#navcontainer a
{
	display: block;
	padding: 3px;
	width: 135px;
	background-color: #036;
	border-bottom: 1px solid #eee;
	color: #FFF;
	font: bold 75% Arial, Helvetica, sans-serif;
	text-decoration: none;
	letter-spacing: 0.1em;
}

#navcontainer a:link, #navlist a:visited
{
	color: #FFF;
	text-decoration: none;
}
#navcontainer a:hover
{
	background-color: #369;
	color: #fff;
}

/* cierra navegación izquierda*/

/* ............................................................. */

/* abre pie */

.pie{
	margin:0px 165px 20px 150px;
	background-image: url(../activos/imagenes/fondos/papel.gif);
	height: 25px;
	width: auto;
	padding: 0 20px;
	color: #666;
}
#contenedor .pie p {
	margin: 5px 0;
	font: 80% bold Arial,Helvetica,sans-serif;
}

/* cierra pie*/

gutiw · #4 (**permalink**) 07/01/2006, 14:36

overflow: hidden;

Por si le sirve a alguien.