Foros del Web » Creando para Internet » CSS »

Problema de visualización en diferentes navegadores

Estas en el tema de Problema de visualización en diferentes navegadores en el foro de CSS en Foros del Web. Hola. He creado una tabla de 3 filas y 3 columnas. En la primera fila fusiono las dos primeras celdas, y a la tercera le ...
  #1 (permalink)  
Antiguo 05/07/2009, 19:21
 
Fecha de Ingreso: julio-2009
Mensajes: 36
Antigüedad: 8 años, 5 meses
Puntos: 0
Problema de visualización en diferentes navegadores

Hola.

He creado una tabla de 3 filas y 3 columnas. En la primera fila fusiono las dos primeras celdas, y a la tercera le pongo un ancho fijo en pixeles. En la segunda fila fusiono las tres columnas. Y en la tercera fusiono las dos últimas columnas para mostrar un pdf y a la primera le pongo un ancho fijo en pixeles.

Con las últimas versiones de firefox, chrome y safari no tengo problemas.

Con explorer 8 no se respeta el ancho de la primera celda de la tercera fila, de modo que toma el ancho de lo que haya escrito en la primera celda de la primera fila.

Con Opera 9.64 el ancho de la primera celda de la tercera fila es variable puesto que se iguala el ancho de la segunda celda de la tercera fila al ancho establecido en la segunda celda de la primera fila.

Además hay un segundo problema añadido. El pdf ocupa todo el alto de la última celda de la tercera fila en firefox, chrome y safari, pero en el explorer ocupa el alto de la ventana del navegador y en opera apenas nada. Y eso que está establecido al 100% tanto la tabla como las etiquetas tr, td y embed.

Os dejo la dirección de la página: w ww.infochinchillas.com/pruebatexto6.php (al no tener 30 días de antigüedad no me deja poner enlaces, lo lamento).

Espero que podáis ayudarme, porque ya no sé como solucionarlo.

Un saludo.
  #2 (permalink)  
Antiguo 07/07/2009, 18:34
 
Fecha de Ingreso: julio-2009
Mensajes: 36
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: Problema de visualización en diferentes navegadores

He replanteado la situación de modo que ahora estoy con bloques div.

Trato de crear dos bloques, uno al lado del otro. El primero es una columna a la izquierda que tiene una anchura fija en pixeles y altura no definida. El segundo muestra diversa información, dependiendo de los enlaces de la columna.
La altura de ambos bloques debe igualarse independientemente de qué bloque tenga una mayor altura.
Esto ya lo he conseguido.

El problema que me surge es cuando intento incrustar un pdf en el bloque de la derecha.
Con safari y chrome no hay problema, pero con explorer, firefox y opera no logro que se muestre ocupando toda la altura del bloque. Ocupa sólo una fracción. Lo curioso es que como le he puesto a ese bloque un fondo de color sé que la altura del bloque es correcta. No sé que pasa. Parece como si unos navegadores interpretasen height:100% de una forma y otros de otra.

¿Una ayuda?

La dirección de la página es w ww.infochinchillas.com/pruebatexto7.php

Lamento no poder poneros el código por no tener más de 30 días de registro.

Un saludo.
  #3 (permalink)  
Antiguo 08/07/2009, 06:10
 
Fecha de Ingreso: julio-2009
Mensajes: 36
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: Problema de visualización en diferentes navegadores

He descubierto como poneros el código. Lo único que en la segunda línea y en la dirección del archivo pdf he tenido que modificar el enlace para que me deje escribirlo

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"w ww.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body, html{
	height:100%;
}
body{
	background-color: #999;
}
#contenedor, #fila, #pdf {
	vertical-align: top;
	width: 100%;
}
#contenedor {
	display: table;
}
#fila {
	display: table-row;
}
#barra, #cuerpo {
	display: table-cell;
	vertical-align: top;
	overflow: hidden;
	height: auto;
}
#barra {
	width: 184px;
	background-color: #F00;
}
#cuerpo {
	background-color: #0C0;
}
#pdf {
	height: 100%;
}
</style>
</head>
<body>
<div id="contenedor">
<div id="fila">
	<div id="barra">
                <a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br />
                <a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br />
                <a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br />
                <a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br />
                <a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br />
                <a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br />
                <a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br />
                <a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br />
                <a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br />
                <a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br />
                
	</div>
	<div id="cuerpo">
	  <embed id="pdf" src="w ww.un.org/Depts/Cartographic/map/profile/ecuador.pdf#toolbar=0&navpanes=0&statusbar=0$view=FitH" type="application/pdf"></embed> 
	</div>
</div>
</div>
</body>
</html>
¿Qué se os ocurre que pueda hacer?

Un saludo.
  #4 (permalink)  
Antiguo 12/07/2009, 11:20
 
Fecha de Ingreso: julio-2009
Mensajes: 36
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: Problema de visualización en diferentes navegadores

La verdad es que es la primera duda que consulto aquí y al final me ha tocado pasar muchas horas de pruebas de posibles soluciones para alcanzar el objetivo. Dejo la solución aquí para que otra persona no gaste tanto tiempo en esto como yo.

La idea es crear mediante div una tabla, con una fila y dos columnas. Independientemente de lo que haya en cada una de las columnas la más pequeña debe aumentar su altura para igualarse con la más alta. Además, en la columna de la derecha (en este caso) se muestra contenido mediante un iframe. El problema clásico es que no funciona el height=100%, por lo que es necesario poner un poco de javascript al final de la página de modo que en este caso se mide la altura de la celda de la izquierda para darle exactamente esa altura al iframe.

Este código está probado y funciona en:
Internet Explorer 8 (no funciona en la vista de compatibilidad, la columna de la derecha se pone bajo la de la izquierda)
Mozilla Firefox 3.0.11
Opera 9.64
Safari 4.0.2
Chrome 2.0.172.33

El enlace de la página es w*ww.infochinchillas.com/pruebatexto9.php (borrando el *, que todavía no he escrito 30 mensajes y no me deja poner enlaces)

Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h*ttp://w*ww.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body, html{
	height:100%;
}
body{
	background-color: #999;
}
#contenedor, #fila {
	vertical-align: top;
	width: 100%;
	border: 0px;
}
#contenedor {
	display: table;
}
#fila {
	display: table-row;
}
#barra, #cuerpo {
	display: table-cell;
	vertical-align: top;
	overflow: hidden;
	height: auto;
}
#barra {
	width: 184px;
	background-color: #F00;
}
#cuerpo {
	background-color: #0C0;
}
#visor {
	vertical-align: top;
	width: 100%;
	overflow:auto;
	border: 0px;
}
</style>
</head>
<body>
<div id="contenedor">
    <div id="fila">
        <div id="barra">
            <a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br />
            <a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br />
            <a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br />
            <a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br />
            <a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br />
            <a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br />
            <a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br />
            <a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br />
            <a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br /> <a href="#">Link</a> <br />
        </div>
        <div id="cuerpo">
            <iframe id="visor" src="h*ttp://w*ww.forosdelweb.com">
            	<p>Su navegador no soporta iframes. Puede acceder al enlace seleccionado <a href="h*ttp://w*ww.forosdelweb.com">pulsando aquí</a>.</p>
            </iframe>
        </div>
    </div>
</div>
</body>
</html>
<script>
alto = document.getElementById('barra').offsetHeight;
document.getElementById('visor').style.height = alto + 'px';
</script>
Un saludo y gracias por la colaboración: h*ttp://w*ww.forosdelweb.com/f13/calcular-height-del-div-contenido-424051/

PD: (Si algún administrador quisiese editar este mensaje para que quedase bien el código y los enlaces se lo agradeceríamos todos, seguro)

Última edición por barje; 12/07/2009 a las 11:25
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:01.