Foros del Web » Creando para Internet » HTML »

problema height="100%" mozilla

Estas en el tema de problema height="100%" mozilla en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 02/09/2008, 09:35
 
Fecha de Ingreso: agosto-2008
Mensajes: 14
Antigüedad: 9 años, 3 meses
Puntos: 0
problema height="100%" mozilla

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.
  #2 (permalink)  
Antiguo 02/09/2008, 10:36
Avatar de poison_mayer  
Fecha de Ingreso: julio-2008
Mensajes: 69
Antigüedad: 9 años, 4 meses
Puntos: 2
Respuesta: problema height="100%" mozilla

lo que sucede es que le das a la imagen de cabecera 100% de alto intenta dandole exactamente la altura de la imagen
  #3 (permalink)  
Antiguo 02/09/2008, 12:53
 
Fecha de Ingreso: agosto-2008
Mensajes: 14
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: problema height="100%" mozilla

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.
  #4 (permalink)  
Antiguo 02/09/2008, 13:04
 
Fecha de Ingreso: agosto-2008
Mensajes: 14
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: problema height="100%" mozilla

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;
}
  #5 (permalink)  
Antiguo 03/09/2008, 01:05
 
Fecha de Ingreso: septiembre-2007
Ubicación: Buenos Aires, Argentina.
Mensajes: 95
Antigüedad: 10 años, 3 meses
Puntos: 2
Respuesta: problema height="100%" mozilla

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

prueba dandole al elemento padre overflow: hidden ; o show.
  #6 (permalink)  
Antiguo 03/09/2008, 09:53
 
Fecha de Ingreso: agosto-2008
Mensajes: 14
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: problema height="100%" mozilla

Ya lo he probado. Me temo que el problema persiste. Gracias de todas formas por el intento
  #7 (permalink)  
Antiguo 03/09/2008, 14:19
Avatar de Sommy  
Fecha de Ingreso: septiembre-2008
Mensajes: 228
Antigüedad: 9 años, 3 meses
Puntos: 6
Respuesta: problema height="100%" mozilla

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!
  #8 (permalink)  
Antiguo 05/09/2008, 09:02
 
Fecha de Ingreso: agosto-2008
Mensajes: 14
Antigüedad: 9 años, 3 meses
Puntos: 0
Respuesta: problema height="100%" mozilla

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;
}
  #9 (permalink)  
Antiguo 05/09/2008, 14:47
Avatar de Sommy  
Fecha de Ingreso: septiembre-2008
Mensajes: 228
Antigüedad: 9 años, 3 meses
Puntos: 6
Respuesta: problema height="100%" mozilla

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!
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 18:46.