Foros del Web » Creando para Internet » CSS »

Problemas con DIVS e IE

Estas en el tema de Problemas con DIVS e IE en el foro de CSS en Foros del Web. Hola, saludos cordiales amigos, llevo meses leyendo la fantástica información que aquí se postea gracias a vosotros y por fin he decidido registrarme para pediros ...
  #1 (permalink)  
Antiguo 30/06/2009, 08:39
Avatar de anf
anf
 
Fecha de Ingreso: junio-2009
Mensajes: 30
Antigüedad: 8 años, 5 meses
Puntos: 4
[Solucionado] Problemas con DIVS e IE

Hola, saludos cordiales amigos, llevo meses leyendo la fantástica información que aquí se postea gracias a vosotros y por fin he decidido registrarme para pediros ayuda.

Estoy actualmente diseñando una página Web table-less con posicionamiento CSS, visualizo con Chrome y pruebo con Firefox, Safari, Opera e IE, todos los navegadores excepto IE muestran las cosas como tienen que salir, estoy mas que harto de Microsoft y su paralelismo independiete al desarrollar su navegador , en el caso que me ocurre ahora tengo este código:

Código PHP:
// Funciones variopintas, bla bla bla y output final
print "
<div id='content_top_left'></div><div id='content_top_right'></div>
<div id='content'>$r</div>
<div id='content_bottom_left'></div><div id='content_bottom_right'></div>"
;
?> 
Que devuelve en HTML:

Código:
<div id='center'>
  <div id='content_top_left'></div>
  <div id='content_top_right'></div>
  <div id='content'>
    <div id='navegacion'>Opciones de navegación</div>
  </div>
  <div id='content_bottom_left'></div>
  <div id='content_bottom_right'></div>
</div>
Que a su vez tiene este CSS:

Código:
#center {
color: #fff;
width: auto;
text-align: center;
margin: 20px 60px 20px 60px;
padding: 15px;
}
#content_top_left {
background: #ff0000 url(corner_tl.png) top left no-repeat;
float: left;
width: 50%;
height: 50px;
}
#content_top_right {
background: #0000ff url(corner_tr.png) top right no-repeat;
float: right;
width: 50%;
height: 50px;
}
#content {
background-color: #fdfdfd;
padding: 15px;
color: #000000;
}
#content_bottom_left {
background: #0000ff url(corner_bl.png) top left no-repeat;
float: left;
width: 50%;
height: 50px;
}
#content_bottom_right {
background: #ff0000 url(corner_br.png) top left no-repeat;
float: right;
width: 50%;
height: 50px;
}
Y cuyo resultado en Chrome, Firefox, Safari y Opera es este:
h t t p : / / s 3 . s u b i r i m a g e n e s . c o m : 8 1 / i m a g e n / p r e v i o / t h u m p _ 2 8 0 5 3 7 7 n o t i s i e . p n g

Y en Internet Explorer 7 es este:
h t t p : / / s 3 . s u b i r i m a g e n e s . c o m : 8 1 / i m a g e n / p r e v i o / t h u m p _ 2 8 0 5 3 8 0 i s i e . p n g

(Perdon por las direcciones pero si no tengo 30 días de antiguedad no me permite el sistema postearlas.)

Se que tiene que ver con el width: 50%; por que al parecer Internet Explorer lo toma del tamaño total mientras que los demás lo toman del tamaño del DIV contenedor, ¿ sabéis algo al respecto? ¿Desaparecerá Internet Explorer para alivio de muchos? Ójala... Ser diseñador Web y pensar siempre en 2 visiones distintas de la misma Web es una M de miércoles a veces...

Saludos amigos y gracias de antemano.

Última edición por anf; 05/07/2009 a las 05:48 Razón: Solución al problema.
  #2 (permalink)  
Antiguo 30/06/2009, 09:23
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problemas con DIVS e IE

Sólo contesto para poner las dos direcciones, que si no es penoso para quien las quiera ver:
http://s3.subirimagenes.com:81/image...377notisie.png
http://s3.subirimagenes.com:81/image...805380isie.png

(Creo que si pones un espacio entre http (h ttp), por ejemplo, ya te deja ponerlas).
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 30/06/2009, 09:26
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problemas con DIVS e IE

Una vez más, debe ser cosa de tu DOCTYPE. Mira tu código con un doctype adecuado, y verás que el problema de la imagen que muestras no ocurre:
Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#center {
color: #fff;
width: auto;
text-align: center;
margin: 20px 60px 20px 60px;
padding: 15px;
}
#content_top_left {
background: #ff0000 url(corner_tl.png) top left no-repeat;
float: left;
width: 50%;
height: 50px;
}
#content_top_right {
background: #0000ff url(corner_tr.png) top right no-repeat;
float: right;
width: 50%;
height: 50px;
}
#content {
background-color: #fdfdfd;
padding: 15px;
color: #000000;
}
#content_bottom_left {
background: #0000ff url(corner_bl.png) top left no-repeat;
float: left;
width: 50%;
height: 50px;
}
#content_bottom_right {
background: #ff0000 url(corner_br.png) top left no-repeat;
float: right;
width: 50%;
height: 50px;
}
</style>
</head>
<body>
<div id='center'>
<div id='content_top_left'></div>
<div id='content_top_right'></div>
<div id='content'>
<div id='navegacion'>Opciones de navegación</div>
</div>
<div id='content_bottom_left'></div>
<div id='content_bottom_right'></div>
</div>
</body>
</html>
__________________
Visita mi nueva web idplus.org
  #4 (permalink)  
Antiguo 30/06/2009, 09:28
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problemas con DIVS e IE

Tienes además un error aquí:
Cita:
#content_bottom_right {
background: #ff0000 url(corner_br.png) top left no-repeat;
float: right;
width: 50%;
height: 50px;
}
debe ser right
__________________
Visita mi nueva web idplus.org
  #5 (permalink)  
Antiguo 05/07/2009, 05:48
Avatar de anf
anf
 
Fecha de Ingreso: junio-2009
Mensajes: 30
Antigüedad: 8 años, 5 meses
Puntos: 4
Respuesta: Problemas con DIVS e IE

Anda coño, copie los estilos pero se me olvidó darle top left, top right, bottom left y botom right, ahí está el fallo.

Muchas gracias, la cosa mas tonta es la que te vuelve loco siempre, gracias por tu agudeza visual

Uso un DOCTYPE XHTML Transitional y lo raro es que sepan interpretarlo bien el resto de navegadores con esa pésima alineación todos a la izquierda.
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:14.