Foros del Web » Creando para Internet » CSS »

Problemas con IE y CSS

Estas en el tema de Problemas con IE y CSS en el foro de CSS en Foros del Web. Estoy aprendiendo a crear diseños sin usar tablas, a base de DIV's y CSS. Pero me ha surgido un problema con el explorador IE. Quiero ...
  #1 (permalink)  
Antiguo 11/02/2005, 06:09
 
Fecha de Ingreso: septiembre-2004
Ubicación: seomaker
Mensajes: 78
Antigüedad: 13 años, 3 meses
Puntos: 0
Problemas con IE y CSS

Estoy aprendiendo a crear diseños sin usar tablas, a base de DIV's y CSS.
Pero me ha surgido un problema con el explorador IE.

Quiero crear mediante DIV's y CSS lo que sería una tabla con 2 columnas.
Suponiendo que lo hubiera hecho con tablas, la tabla mediria 720 pixels, de los cuales la columna de la izquierda mediría 350px y la derecha el resto: 370px.

Para ello he creado una DIV "contenedor" y otras dos "izquierda" y "derecha".

<div id="contenedor">
<div id="izquierda"> </div>

<div id="derecha"> </div>
</div>


y en la CSS tengo el siguiente codigo:



#contenedor {
width:720px;
border-top: 1px solid #999999;
border-right: 1px none #999999;
border-bottom: 1px solid #999999;
border-left: 1px none #999999;
}

#izquierda {
width:350px;
float:left; /* flota en la izquierda*/
background-color: #FFCC33;
}

#derecha {

width:370px;
margin-left:350px; /* se desplaza hacia la derecha*/
background-color: #FF9999;
}



----------------------------


Como 350+370=720 la dos columnas caben en el contenedor... pero esto SOLO OCURRE en Mozilla Firefox, es decir, se ve lo que yo quiero.

En I. Explorer me he dado cuenta que mete entre las dos columnas unos 5 pixeles misteriosos.

Por una parte pensé en restarle esos 5 pixeles a la columna de la derecha para poderla meter, pero... ¿Es lógico este truco chapucero? Supongo que habrá una solución...

y por otra parte me gustaría saber si esos 5 pixeles se pueden eliminar de alguna forma.


Gracias de antemano.
__________________
Cómo hacer una página web
  #2 (permalink)  
Antiguo 11/02/2005, 07:21
Avatar de Khronos  
Fecha de Ingreso: agosto-2004
Ubicación: Venezuela, PLC
Mensajes: 218
Antigüedad: 13 años, 3 meses
Puntos: 0
Hola.

Lo que te muestro a continuación, es simplemente una prueba que estuve haciendo.

Aparentmente, funciona bien para IE y Firefox

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test Capas</title>
<link rel="stylesheet" type="text/css" href="css.css" />
</head>

<body>



<div id="izquierda">Texto</div> 

<div id="derecha">Texto</div> 



</body>
</html> 

Código:
#izquierda {
position: absolute;
width:350px;
float:left; /* flota en la izquierda*/
background-color: #FFCC33;
border-top: 1px solid #999999;
border-right: 1px none #999999;
border-bottom: 1px solid #999999;
border-left: 1px none #999999;
top: 10%;
} 

#derecha {
width:370px;
margin-left: 350px; /* se desplaza hacia la derecha*/
background-color: #FF9999;
position: absolute;
border-top: 1px solid #999999;
border-right: 1px none #999999;
border-bottom: 1px solid #999999;
border-left: 1px none #999999;
top: 10%;
}
__________________
When someone dies in the grip of a powerful rage... A curse is born. The curse gathers in that place of death. Those who encounter it will be consumed by its fury.
  #3 (permalink)  
Antiguo 11/02/2005, 07:21
Avatar de monoswim
$moderador{'Esteban'}
 
Fecha de Ingreso: febrero-2002
Ubicación: Buenos Aires - Argentina
Mensajes: 8.762
Antigüedad: 15 años, 10 meses
Puntos: 90
Pregunta mejor en el foro de CSS

Saludos
__________________
Esteban Quintana
  #4 (permalink)  
Antiguo 11/02/2005, 08:19
 
Fecha de Ingreso: enero-2005
Mensajes: 265
Antigüedad: 12 años, 11 meses
Puntos: 1
http://css-discuss.incutio.com/?page=TwoColumnLayouts
  #5 (permalink)  
Antiguo 12/02/2005, 06:23
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
Tema trasladado al foro de CSS desde (x)html
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 05:18.