En un capa que contiene 3 capas, la ultima no queda bien

abiza · #1 (**permalink**) 20/05/2008, 08:15

Estimados amigos del Foro:

He diseñado una estructura basica con capas, donde la capa "Contenido" tiene dentro a las capas "Navegacion", "Definicion" y "Panel Derecho", a las cuales les corresponden los porcentajes 20%, 60% y 20% respectivamente.

Cuando visualizo la pagina en Firefox, se ve como la quiero.- sin embargo, en IE, la tercer capa ("Panel Derecho") lo coloca debajo de la primer capa ("Navegacion").

He modificado los porcentajes, lo he hecho con pixeles fijos (que no lo quiero asi, por cierto) y no mas no se deja.

Podrian echarme una mano?

Aqui dejo el codigo.

De antemano, muchas gracias por su ayuda

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PAGINA
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="estilo_general.css" rel="stylesheet" type="text/css" />
<title>Index</title>
<LINK REL="SHORTCUT ICON" HREF="imagenes/icono.gif">
</head>

<body>
<div id="global">
<div id="cabecera">
</div>
<div id="barra">
</div>
<div id="Contenido">
<div align="left" id="navegacion">
</div>
<div id="definicion">
</div>
<div id="panel_derecho">
</div>
</div>
<div id="pie">Fecha de Ultima actualizacion:
19 Mayo, 2008 2:33 PM</div>
</div>
</body>
</html>

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
HOJA DE ESTILOS
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
@charset "utf-8";

* {
font-family: Georgia, "Times New Roman", Times, serif;
margin: 0px 0px 0px 0px;
padding: 0px;
border: none;
}

#global {
width: 98%;
height: 768px;
margin: 0px 0px 0px 0px;
padding: 0px;
border: none;

}

#cabecera {
width: 98%;
height: 120px;
margin: 0px 0px 0px 0px;
padding: 0px;
border: none;

background-color:#000066;
}

#barra {
width: 98%;
height:20px;
margin:0px 0px 0px 0px;
padding: 0px;
border: none;

background-color:#FF0000;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12pt;
color:#CCCCCC;
}

#Contenido{
width: 98%;
height: *;
margin:0px 0px 0px 0px;
padding: 0px;
border: none;
clear: right;
font-family: Georgia, "Times New Roman", Times, serif;
font-size:12px;
color:#000066;
text-align:justify;
}

#navegacion {
width: 20%;
height: 500px;
margin: 0px 0px 0px 0px;
padding: 0px;
border:none;
float:left;
background-color:#E1E1E1;
}

#definicion {
width: 60%;
height: 499px;
margin:0px 0px 0px 0px;
padding: 0px;
border:none;
float: left;
background-color: #FFFFFF;
}

#panel_derecho {
width: 20%;
height: 500px;
margin: 0px 0px 0px 0px;
padding: 0px;
border:none;
float: left;
background-color: #E1E1E1;
clear: inherit;
}

#pie {
width: 98%;
height: 25px;
float: left;
background-color: #000066;
color: #999999;
font-size:10px;
text-align:center;
}

daPhyre · #2 (**permalink**) 20/05/2008, 10:31

Si no mal recuerdo, IE tiene un pequeño defecto en la suma de porcentajes. Intenta hace el de enmedio un poco más pequeño, creo que 59% servirá, si no, quizá un poco menos... Si esto lo resuelve, veremos como optimizarlo, en caso contrario, habría que ver otra posibilidad. Suerte!

abiza · #3 (**permalink**) 20/05/2008, 13:08

Cita:

Iniciado por daPhyre

Si no mal recuerdo, IE tiene un pequeño defecto en la suma de porcentajes. Intenta hace el de enmedio un poco más pequeño, creo que 59% servirá, si no, quizá un poco menos... Si esto lo resuelve, veremos como optimizarlo, en caso contrario, habría que ver otra posibilidad. Suerte!

Estimado DPhyre:

Si, con 59% sí que funciona.
Yo pense que habia indicado algo mal en el codigo, no pense que fuera un error propio del IE.
Se nota un poco el desfase, pero creo que es tolerable.

Muchisimas gracias por tu pronta ayuda.

Sinceramente

daPhyre · #4 (**permalink**) 21/05/2008, 09:16

Si, ¿Por qué crees que todos nosotros los desarrolladores web adoramos tanto a IE? XD

Me alegro haber podido ayudar. Ahora, creo que hay una forma de que sea 60% para todos los exploradores, y diferente para IE, para que no se vea mal el los demás por culpa de IE:

#definicion {
width: 60% !important;
width: 59%;

Según se, el important significa que ninguna otra instrucción cambie eso que has indicado, pero extrañamente (Y para fortuna nuestra) IE no lo reconoce... Con eso podrás hacer que ajustarlo para IE no afecte la presentación de tu pagina en otros navegadores. Ojalá te sirva. Suerte!

Mikmoro · #5 (**permalink**) 21/05/2008, 10:21

Y como de costumbre, hay una solución mejor:

primero se pone el panel derecho con el 20%, luego el izquierdo con el 20% y luego el central sin tamaño. Queda perfecto.

Mikel.

daPhyre · #6 (**permalink**) 21/05/2008, 10:23

Cita:

Iniciado por Mikmoro

Y como de costumbre, hay una solución mejor:

primero se pone el panel derecho con el 20%, luego el izquierdo con el 20% y luego el central sin tamaño. Queda perfecto.

Mikel.

¿Y como es que vine a olvidar esto si es lo que yo hago? ¬¬'
(Quizá por que lo hago inconcientemente)

Gracias Mikel por recordarnoslo =P'

abiza · #7 (**permalink**) 21/05/2008, 13:17

Cita:

Iniciado por daPhyre

¿Y como es que vine a olvidar esto si es lo que yo hago? ¬¬'
(Quizá por que lo hago inconcientemente)

Gracias Mikel por recordarnoslo =P'

Muchas gracias a ambos por la respuestas.
Ya probe esa nueva forma, y claro, funciona.

Gracias de nuevo a ambos