Problema con IE 6

[Rutador]

Hola este es mi primer mensaje.

La cuestión es que estoy intentando cuadrar unas cajas y el P... IE 6 me esta sacando de mis casillas. Ya no se que más hacer....

Tanto en IE 7 como Opera y en Firefox se ve bien la página.
Paso un enlace donde se puede ver de lo que hablo

http://www.workcom.net/prueba/index.htm
http://www.workcom.net/prueba/estilo.css

Agradezco de antemano la ayuda que podais darme.

[mglorena]

Hola Rutador, estuve viendo tu problema, y creo haber logrado que se vea bien en ambos browser.


<style>
body {
font: .9em Arial, "Trebuchet MS", Tahoma, sans-serif;
line-height: 1.6em;
background: #F0BA00;
color:#000;

}

#contenido{
text-align:center;
margin:0 0 0 0 ;
background:#000;
}

#index {
text-align:left;
margin: 0 auto;
background:#fff;
position:relative;
width:973px;
height:540px;
padding-left:9px;
padding-top:10px;
}

#caja1 {
float:left;
width:50%;
height:98%;
background:#CF7E05;


}

#caja2 {
width:49%;
height:98%;
float:left;
background: #DDD;

}

</style>



<div align="center">

<div id="index">
<div id="caja1">Caja 1</div>
<div id="caja2">Caja 2</div>

</div>
</div>


el problema esta, en que si usamos valores fijos, como 452px ambos browsers los toman distintos, es por eso que use valores porcentuales.


Saludos

[Rutador]

Hola María, antes de nada quiero agradecerte el tiempo que has dedicado a mi problema.

La verdad es que cuando observaba el aspecto que tenían las cajas en IE6 sabía que estaba añadiendo algún tamaño "extra" el browser.

Una pregunta que me queda pululando en la cabeza es si el uso de los porcentajes en el futuro podría ser un problema con browser nuevos. Y si no hay alguna otra manera de forzar los anchos fijos px en navegadores antiguos.

Se me olvido comentar que tambien declaré el valor:

*{
margin: 0;
padding: 0;
}

Pero IE6 le da lo mismo.

Un saludo y muchas gracias por tu tiempo y dedicación.

[JavierB]

Hola Rutador

Prueba con

Código:

body, html {margin:0; padding:}

a ver si te sirve.

Saludos,

[Snd234]

Hola, estube viendo la pagina y no se si el problema sigue siendo el mismo o hiciste algunos cambios con lo que te dijeron. Se supone que dejar un "margen" blanco que cubre ambas capas, y en IE6 el margen derecho no se ve? ese es el problema cierto?

Si fuer asi, en la caja2 te falta especificar el margen derecho...

Otra forma mas practica de hacerlo, es que a la capa index aplicale este estilo

Código PHP:

  padding: 10px;  
   

Y quitale los margenes a la caja1 y caja2, de esta forma el "marco" lo dara el mismo contenedor y no las cajas.

Tambien, a la capa index aplicale

Código PHP:

  overflow: auto;  
   

Y quitale el alto que le tienes especificado. (claro, si tu pagina tiene un alto especificado no hagas caso a esto ultimo), ya que con ese atributo la capa contenedora crecera junto a las cajas.

[Rutador]

Hola a todos,

Gracias por las recomendaciones, el tema que comenta Javier no lo interpreta, de lo que me comenta Snd234 el problema que tengo es que no se por que IE6 añade esos pixeles extras cuando estoy forzando una caja a un tamaño fijo. El tema de padding me lo adapta bien en IE6 pero casca en Firefox, de todas formas no me gusta mucho utilizar el padding salvo en casos contados.

Con los anchos en porcentaje que me recomendo Mária he visto que tiene despues un problema y es que depende del contenido de texto que se incluya dentro de la capa se redimensiona a su antojo.

He probado también con la biblioteca de Dean Edwards por si corrigiese algo pero ni por esas.

Muchas gracias