problema de etiquetas div con el navegador mozilla

[aeb_asturias]

Hola a todos. Mi duda es la siguiente:

Tengo una pagina web en la que he incluido una etiqueta div de la siguiente forma:

div style="margin:10px; margin-top:5px; ">
<div class="smallfont" style="margin-bottom:2px"></div>
<div class='alt2' style='margin:0px; padding:6px; border:1px inset; width:100%; height:200px; overflow:auto'>
<code style="white-space:nowrap">
<code><font color="#000000">

.................................................. ..................................
.................................................. ..................................

</font>
</code>
</code>
</div>



pero no se porque con el internet explorer me hace una especie de cuadrado rodeando a todo lo que tengo dentro quedando perfectamente encuandrado todo pero con el mozilla este cuadrado me aparece mucho mas ancho apareciendo unas barras de scroll horizontales porque la ventana se hace mucho mas grande y por tanto no se puede ver toda la página de una vez.

¿porque con mozilla no me queda igual de bien que con el explorer?

¿porque con el mozilla aunque le pongo en la etiqueta div el 100% de la página me estira mucho mas ésta quedando mal encuadrada la pagina?

Un saludo.

[tunait]

Hola aeb_asturias

Es una cuestión de forma de interpretación.

Cuando a un bloque le asignas un valor a la propiedad width se lo estás asignando a su contenido. Si además le asignas un padding, un border y/o un margin lo agregará a la parte externa del contenido.

Es decir, si creas un contenedor de width: 200px y le aplicas además un padding de 10px esos 10px los pondrá alrededor del área de contenidos que yá mide 200px de ancho, con lo que ocupará una anchura total de 220px (los 200 del contenido más 10px por cada extremo horizontal).

En el código que estás usando sucede....

<div style="margin:10px; margin-top:5px; ">

No le asignas una anchura, con lo que tomará por defecto el ancho total de su contenedor. Si su contendor es body, pues toma el ancho de body

<div class='alt2' style='margin:0px; padding:6px; border:1px inset; width:100%; height:200px; overflow:auto'>

Le asignas un width del 100%, así que toma el 100% del contenedor que lo contiene, que yá ocupa el 100%.
Padding: 6px le agrega a ese 100% 6px más por cada lado, lo que suman 12px sobre el 100% de la anchura de body
border: 1px le agrega otro pixel a cada lado, que sumado a los 12 de padding dan 14px.

Esos 14px son los que provocan que salga la barra de desplazamiento horizontal.


Internet Explorer en cambio no lo hace así, si no que cuando le asignas 200px a un contendor, siempre su anchura total será de 200, independientemente del padding etc que le asignes. En IE las dimensiones del padding, border y margin son restadas del espacio del contenido.

Jo, no sé yo si he logrado explicarme....

Puedes leer info detallada aquí
http://www.sidar.org/recur/desdi/tra...width-property

y aquí
http://www.sidar.org/recur/desdi/tra...box-dimensions

[KnowDemon]

Lo que dice Tunait es correcto, pero OJO: el que está haciendo las cosas MAL es el EXPLORER. La recomendacion de la W3C es como lo hace el Mozilla.

[tunait]

OJO: el que está haciendo las cosas MAL es el EXPLORER

of course para no perder la costumbre