Desajuste derecho de div en IE

Ekbrilo · #1 (**permalink**) 21/02/2008, 12:12

Se me presenta este problema: un div contenedor se muestra bien posicionado en Firefox, pero en IE su límite derecho está pegado al borde de la pantalla, de hecho ni siquiera se ve su cierre lateral por ese lado.

El código CSS es:

<style type="text/css>

* {
margin: 0;
padding: 0;
}

body {
background-color: blue;
}

h2 {
font-weight: bold;
font-size: 16px;
font-family: arial;
font-color: black;
}

#contenido {
width: 785px;
position: absolute;
top: 25px;
left: 110px;
background-color: white;
text-align: justify;
text-indent: 1cm;
margin: 20px 18px 40px 27px;
padding: 10px 20px 10px 10px;
}

</style>

Y el HTML:
<!DOCTYPE html PUBLIC"_//w3c//DTD Xhtml 1.0 Transitional// EN" "http://www.3.org/TR/xhtml 1-transitional.dtd">
<link href="../estilos/estilos.css" rel="stylesheet" type="text/css" />
<head>
<body>
<center>
<div id="contenido">
<h2>Aquí viene un texto de varias líneas...</h2>
</div>
</body>
</html>

¿Hay algo que explique esa diferencia desfavorable con IE?

cleft · #2 (**permalink**) 21/02/2008, 12:20

Habra que ver en que version de IE. Lo unico que se me ocurre decirte es sobre:
El IE Box Model Bug
es.wikipedia.org/wiki/Internet_Explorer_box_model_bug

(eso respondiendo tu ultima pregunta)

Ekbrilo · #3 (**permalink**) 21/02/2008, 12:49

El ensayo lo he hecho en IE6. Y gracias por el enlace, le echaré un vistazo.

Un saludo :)

juaniquillo · #4 (**permalink**) 21/02/2008, 17:03

Pues yo lo veo perfecto en IE7, IE6 y FF. Eso si, tienes tres errores. 1- Tienes una etiqueta de <center> sin cerrar y que en verdad no hace nada. Yo la quite. 2- Te faltan unas comillas la linea

Código HTML:

<style type="text/css>

debería ser

Código HTML:

<style type="text/css">

3- No cerraste el elemento <head>.

Hay algunas recomendaciones que te podría hacer (habías olvidado la codificación. Yo le puse utf-8) pero lo otro está bien:

Código HTML:

<!DOCTYPE html PUBLIC"_//w3c//DTD Xhtml 1.0 Transitional// EN" "http://www.3.org/TR/xhtml 1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">

* {
margin: 0;
padding: 0;
}

body {
background-color: blue;
}

h2 {
font-weight: bold;
font-size: 16px;
font-family: arial;
font-color: black;
}

#contenido {
width: 785px;
position: absolute;
top: 25px;
left: 110px;
background-color: white;
text-align: justify;
text-indent: 1cm;
margin: 20px 18px 40px 27px;
padding: 10px 20px 10px 10px;
}

</style>
</head>
<body>
<div id="contenido">
<h2>Aquí viene un texto de varias líneas...</h2>
</div>
</body>
</html>

Ekbrilo · #5 (**permalink**) 22/02/2008, 06:13

En efecto, Juaniquillo, en mi transcripción están esos errores que me indicas -las comillas y las etiquetas <center> y <head> sin cerrar-, pero sólo en la transcripción, no en el documento html en sí. Con respecto a la codificación, pues la verdad es que no sabía que para las pruebas en local también fuese necesaria, normalmente me limito a poner el código encabezado por el doctype.

De todas formas, esto del CSS funciona de un modo un tanto extraño. Lo digo porque finalmente resolví el problema expuesto en el post inicial cambiando la posición absoluta por una relativa. ¿Cómo puede entenderse esto de una manera lógica? (No digo que no la tenga, sólo que yo no la veo...).

Un saludo.