"area efectiva" - css
Bueno, pues estoy pasando un sitio con html y tablas puñeteras a uno controlado con css.
Muy feliz me encontraba de que ya estaba terminando el posicionamiento y buehh... me paso algo parecido a Marcus
El caso es que en IE (desde donde estaba testando) todo iba de lujo, pero al recordar a Firebird (había olvidado testar en el navegador que yo uso ¡) se movieron los elementos. Bueno, el problema es con el margin del body.
Tengo:
body{
margin : 20px, 130px, 20px, 130px;
}
* En IE estos márgenes definen lo que yo llamaría "area efectiva" de la página y voy trabajando con respecto a esa "area"
* Firebird se pasa estos márgenes por el arco del triunfo y manda algunos elementos totalmente a la izquierda del monitor o hacia abajo.
Nota: con esos márgenes se ve correctamente un sitio con ancho de 740px solo con una resolución de 1024.
Hacer dos versiones para cada navegador o dos hojas de estilo no suena muy bien.
Espero sus comentarios. Orange y compañía estan invitados a la fiesta.. :p
saludetes.
[xaguar]
orange
No me aclaro muy bien, quizá deberías poner un ejemplo de lo que quieres conseguir, aunque sea maquetado con tablas, para que lo veamos mejor.
Por lo que parece creo que quieres dejar un espacio en blanco desde el borde de la página, si es eso creo que te has confundido de propiedad.
El margin establece el espacio de separación del objeto con otros elementos, de forma que estarías separando el body de otros elementos, pero como el body ocupa toda la página ¿de qué lo estás separando? ... en realidad es como si quisieras expandir la página hacia fuera.
Yo creo que para lo que tú buscas deberías utilizar la propiedad padding, que es el espacio desde el borde de la caja hasta que comienza el contenido dentro de ella, de esa forma conseguirías que es "epacio útil" de la página, siempre estuviera separado X distancia del borde de la misma.
Pero ya te digo que no sé exactamente lo que quieres conseguir, a lo mejor los tiros no van por ahí.
adn
Si, quizás un ejemplo ayude...
Respecto a lo del Arco del Triunfo, normalmente Firebird/Mozilla responden más fielmente a los estándares que IE. Mírate cualquier tabla comparativa. El desarrollo de IE hace tiempo que está detenido. Mozilla y Firebird mejoran cada día.
lemark
Tu problema tiene facil solucion.
donde pones
<code>body{
margin : 20px, 130px, 20px, 130px;
} </code>
debes poner
<code>body{
margin : 20px 130px 20px 130px;
} </code>
es decir evita las comas, firebird es mucho mas estricto a la hora de aplicar css.
adn
jajaja
Hala! Ni había visto las comas! :P
orange
O_o
.......................
A mi también se me pasó ese detalle
xaguar
Caramba, pues el detalle de las comas solucionó el asunto. No había tomado en cuenta este error.
También he probado con rellenos y parece ir bien. Esta imagen despejará dudas:
http://www.institutodefiscal.net/tester/simple.gif
El espacio en blanco es la distancia entre el contenido y el "límite de la pantalla". Esos espacios son los que estoy manejando con márgenes. Quizá sea mas correcto manejarlo con rellenos como mencionas Orange.
¿Qué es lo correcto?
Gracias por su ayuda domestikos.
meddle
yo usaria margin como ahora, a no ser que quieras TENER QUE usar el box-model-hack de Tantek.
Basicamente: IE y Mozilla usan de forma diferente los paddings. IE lo usa como debe ser (coño, por una vez...) es decir el espacio total mas el padding, mientras que Mozilla usa el espacio interno solamente.
O sea, con margin tocas 'posicionamiento respecto a otros elementos' mientras que con padding tocas 'tamaño efectivo'
adn
Meddle, creo que te equivocas. A mi entender tanto Mozilla como IE6 interpretan correctamente margin y padding. Son IE5 y IE5.5 los que la pifian por alguna razón. De hecho, para corregir esto existe el Box Model Hack.
http://tantek.com/CSS/Examples/boxmodelhack.html
meddle
no creo que haya dicho nada incorrecto, simplemente no puse la version del IE. Como dices IE5 e IE5.5 son los diferentes, pero repito, son esos los que usan los valores que yo creo son los intuitivamente correctos. El caso es que si usas padding deberas usar el box model hack
meddle
por cierto en el post que comentas al principio, Josh habla exactamente de lo mismo, el modelo del antiguo IE es el mas intuitivo y el W3C se ha replanteado adaptarlo. Hay una opcion, que sigue los estandares que es usar lo siguiente:
<code>* {
-moz-box-sizing: border-box;
box-sizing: border-box;
} </code>
Con eso los navegadores usan el modelo de vajas del IE5. No lo he probado con tamaños porcentualesm pero en fijos funciona de coña.
orange
A ver ...
- Aunque no sea lo más correcto desde el punto de vista conceptual, si te funciona con el margin yo lo usaría, porque te puedes ahorrar el hack de Tantek, como dice Meddle.
- Lo que pone Josh funciona, aunque a mi en la última que he hecho me daba problemas y he vuelto al hack de Tantek.
- Meddle, creo que esta vez estás confundido, tanto IE como Moz actuales interpretan correctamente el modelo de caja propuesto por el W3C.
- IE5 lo interpretaba mal, ya que metía el padding y border dentro del width.
Otra cosa es que el modelo del IE5 fuese más intuitivo, que a mi me lo parece, y que el W3C haya decidido dar un poco marcha atrás en su recomendación, permitiendo ahora escoger el modelo de caja que prefieres.
adn
<em>son esos los que usan los valores que yo creo son los intuitivamente correctos.</em>
Eso no te lo puedo rebatir ;D
Pero en las especificaciones del w3c no pone eso. Y los estándares funcionan cuando todo el mundo sigue las especificaciones. Si te digo la verdad, en las páginas que yo hago paso olímpicamente de IE5 y IE5.5. Sólo me preocupa que la página funcione, no que sea vea correcta al píxel.
IE5 es Netscape 4.
meddle
yo si puedo no uso padding (y solo uso borders de 1px) asi que... a mi personalmente me la suda, no uso hacks ;)
Pero orange y adn, teneis razon en que una cosa es lo establecido y otra lo intuitivo. Ende el modelo correcto es el actual, aunque no sea el intuitivo segun hemos coincidido todos. Aclarado queda, creo.
orange
Aclarado por mi parte.
Lo que dices del margin me parece un buen truco, aunque se queda un poco cojo, porque hay atributos del padding que no tiene el margin (pej color de fondo), además de que te olvidas que IE5 también incluye el borde, y ese desfase lo tendrás uses margin o padding para separar elementos.
meddle
si, como ya he dicho antes, una explicacion grosera de margin/padding seria que margin es un posicionamiento del contenido respecto a sus anexos, mientras que padding es un cambio de su tamaño.
Y es cierto lo que dices, el borde tambien se incluye en el modelo de caja de IE5, pero eso va a depender de lo fijo que sea el layout, puesto que con bordes de 1px deberias tener muchas capas para empezar a ver problemas serios de posicionamiento. Eso ya es a gusto de cada uno :)