problema height="100%" mozilla

mcventur · #1 (**permalink**) 02/09/2008, 08:35

Hola a todos. Tengo un problema con el height="100%" de algunos elementos en Mozilla, en IE no da ningún problema. El tema es que el siguiente código sale mal dimensionado. Como veis, debería abarcar el total de la ventana, ni más ni menos, pero no es así.
El codigo es este:

Código HTML:

<html>
<head>
 <link rel=StyleSheet HREF="2.css" TYPE="text/css"/>
<!--<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">-->
<!--<script language="javascript" src="2.js"></script>-->
<title>no</title>
</head>

<body topmargin="0" bgcolor="#000000">
<center>
<table id="principal" width="800" height="100%" cellpadding="0" cellspacing="0">
<!-- CABECERA-->
<tr height="20%">
<td id="celda_cabecera" width="800" colspan="2">
<img id="imgCabecera" src="Cabecera2.jpg" width="100%" height="100%">
</td>
</tr>
<!-- CUERPO-->
<tr height="80%">
<td width="520" height="100%" bgcolor="#666666">
<img id="imgCuerpo" src="Noe9.jpg"  width="100%" height="100%">
</td>
<td id="celda_contenido" width="280" height="100%" valign="top" bgcolor="#003366">
	<div width="100%" id="presentacion">
    	<font size="2" Face="forte,Comic Sans MS" color="#FFFFFF">
           		<br>
				Todo pasa y todo queda,<br>
				pero lo nuestro es pasar,<br>
				pasar haciendo caminos,<br>
                caminos sobre el mar.<br><br>

				Nunca persequí la gloria,<br>
				ni dejar en la memoria<br>
				de los hombres mi canción;<br>
				yo amo los mundos sutiles,<br>
				ingrávidos y gentiles,<br>
				como pompas de jabón.<br><br>

				Me gusta verlos pintarse<br>
				de sol y grana, volar<br>
				bajo el cielo azul, temblar<br>
				súbitamente y quebrarse...<br><br>

				Nunca perseguí la gloria.<br><br>

				Caminante, son tus huellas<br>
				el camino y nada más;<br>
				caminante, no hay camino,<br>
				se hace camino al andar.<br><br>

				Al andar se hace camino<br>
				y al volver la vista atrás<br>
				se ve la senda que nunca<br>
				se ha de volver a pisar.<br><br>
                
                Caminante no hay camino<br>
				sino estelas en la mar...<br><br>

				Hace algún tiempo en ese lugar<br>
				donde hoy los bosques se visten de espinos<br>
				se oyó la voz de un poeta gritar<br>
				"Caminante no hay camino,<br>
				se hace camino al andar..."<br><br>

				Golpe a golpe, verso a verso...<br>

				Murió el poeta lejos del hogar.<br>
				Le cubre el polvo de un país vecino.<br>
				Al alejarse le vieron llorar.<br>
				"Caminante no hay camino,<br>
				se hace camino al andar..."<br>
		  		</font>
    		</div>
            <div id="pie"><center>
            <font color="#FFFFFF" size="2">
ay la censura...
            </font>
            </center>
            </div>
</td>
</tr>
</table>
</center>
</body>
</html>

Alguien ve algo que yo no vea?? Se supone que para que coja bien los porcetajes deberías ponerle a cada "elemento contenedor" un height para que también lo coja su elemento contenido, esto cuando se trata de porcentajes.

poison_mayer · #2 (**permalink**) 02/09/2008, 09:36

lo que sucede es que le das a la imagen de cabecera 100% de alto intenta dandole exactamente la altura de la imagen

mcventur · #3 (**permalink**) 02/09/2008, 11:53

Gracias por la respuesta poison_mayer, pero creo que te equivocas. Lo he probado por si acaso, y al bajarle el porcentaje de height tanto a la cabecera como a la imgCuerpo, la tabla sigue midiendo lo mismo, pero las imagenes se achatan, no se ajustan al tamaño d su celda (ke esta dado en el tr correspondiente), que es lo que yo pretendia. El problema parece ser mas que de las imagenes de la propia tabla.

mcventur · #4 (**permalink**) 02/09/2008, 12:04

Por si puede estar relacionado pego también el código css linkado, aunque en cuanto a height solo afecta a dos divs, que estan dentro de la tabla (modificarlselo tampoco me soluciono):

Código HTML:

@charset "utf-8";
/* CSS Document */
#principal{
border:1px solid #FFFFFF;
}
#presentacion{
overflow:auto;
margin-left:10px;
margin-top:10px;
height:80%;
vertical-align:top;
border-bottom:1px solid #FFFFFF;
}
#pìe{
margin-top:10px;
margin-left:10px;
margin-right:5px;
height:20%;
}
#celda_contenido{
border-left:1px solid #FFFFFF;
}
#celda_cabecera{
border-bottom:1px solid #000000;
}

_Maxi · #5 (**permalink**) 03/09/2008, 00:05

no leí bien, pero quizás tengas un problema similar que tenia yo antes..

prueba dandole al elemento padre overflow: hidden ; o show.

mcventur · #6 (**permalink**) 03/09/2008, 08:53

Ya lo he probado. Me temo que el problema persiste. Gracias de todas formas por el intento

Sommy · #7 (**permalink**) 03/09/2008, 13:19

Tema tocadisimooo... jaja... Es el clasico y odioso caso en que iexplorer se rie en las normas de maquetacion y te deja pasar todos los errores...

Tenes que darle 100% de height al body y al html, para que la tabla tambien pueda estirarse. En tu hoja de estilos arega:

Código:

body, html {
    height: 100%;
}

Otra cosa, las alturas en la tabla van con CSS, no en html. EJ:

Código:

<table width="400" style="height:100%">

Suerte!

mcventur · #8 (**permalink**) 05/09/2008, 08:02

Me temo que sigue el problema. Os pego los cambios:

Código HTML:

<html>
<head>
 <link rel=StyleSheet HREF="3.css" TYPE="text/css"/>
<!--<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">-->
<!--<script language="javascript" src="2.js"></script>-->
<title>agr</title>
</head>

<body topmargin="0" bgcolor="#000000">
<center>
<table id="principal" width="800" style:"height=100%" cellpadding="0" cellspacing="0">
<!-- CABECERA-->
<tr style:"height=20%">
<td id="celda_cabecera" width="800" colspan="2">
<img id="imgCabecera" src="Cabecera3.jpg" width="100%" style:"height=100%">
</td>
</tr>
<!-- CUERPO-->
<tr style:"height=80%">
<td width="520" bgcolor="#666666">
<img id="imgCuerpo" src="Noe9.jpg"  width="100%" style:"height=100%">
</td>
<td id="celda_contenido" width="280" valign="top" bgcolor="#003366">
	<div width="100%" id="presentacion">
    	<font size="2" Face="forte,Comic Sans MS" color="#FFFFFF">
           		<br>
				Todo pasa y todo queda,<br>
				pero lo nuestro es pasar,<br>
				pasar haciendo caminos,<br>
                caminos sobre el mar.<br><br>

				Nunca persequí la gloria,<br>
				ni dejar en la memoria<br>
				de los hombres mi canción;<br>
				yo amo los mundos sutiles,<br>
				ingrávidos y gentiles,<br>
				como pompas de jabón.<br><br>

				Me gusta verlos pintarse<br>
				de sol y grana, volar<br>
				bajo el cielo azul, temblar<br>
				súbitamente y quebrarse...<br><br>

				Nunca perseguí la gloria.<br><br>

				Caminante, son tus huellas<br>
				el camino y nada más;<br>
				caminante, no hay camino,<br>
				se hace camino al andar.<br><br>

				Al andar se hace camino<br>
				y al volver la vista atrás<br>
				se ve la senda que nunca<br>
				se ha de volver a pisar.<br><br>
                
                Caminante no hay camino<br>
				sino estelas en la mar...<br><br>

				Hace algún tiempo en ese lugar<br>
				donde hoy los bosques se visten de espinos<br>
				se oyó la voz de un poeta gritar<br>
				"Caminante no hay camino,<br>
				se hace camino al andar..."<br><br>

				Golpe a golpe, verso a verso...<br>

				Murió el poeta lejos del hogar.<br>
				Le cubre el polvo de un país vecino.<br>
				Al alejarse le vieron llorar.<br>
				"Caminante no hay camino,<br>
				se hace camino al andar..."<br>
		  		</font>
    		</div>
            <div id="pie"><center>
            <font color="#FFFFFF" size="2">
                  pitopitogorgorito
                <a href="#">Cómo llegar</a>&nbsp;&nbsp;
                <a href="mailto:[email protected]">Contacto</a>
            </font>
            </center>
            </div>
</td>
</tr>
</table>
</center>
</body>
</html>

y el CSS:

Código HTML:

@charset "utf-8";
/* CSS Document */
body, html {
    height: 100%;
}
#principal{
border:1px solid #FFFFFF;
}
#presentacion{
overflow:auto;
margin-left:10px;
margin-top:10px;
height:80%;
vertical-align:top;
border-bottom:1px solid #FFFFFF;
}
#pìe{
margin-top:10px;
margin-left:10px;
margin-right:5px;
height:20%;
}
#celda_contenido{
border-left:1px solid #FFFFFF;
}
#celda_cabecera{
border-bottom:1px solid #000000;
}

Sommy · #9 (**permalink**) 05/09/2008, 13:47

Proba de dar las alturas en los td, no en el tr. Generalmente a los tr no se le asigna ninguna propiedad...

Por otro lado... veces lo soluciono poniendole al header 1px de alto, y al cuepro no le asigno nada y se autoajusta todo. Funciona seguido, fijate si te da resultado, pero ponelo en alguno de los TD del TR de cabecera.

Saludos!