CSS i IE5/Phoenix/Netscape
5 seguidores
A ver si alguien puede ayudarme....
Estoy remaquetando Linkscape usando CSS, y me encuentro con que IE5 calcula diferente el ancho de los DIV que Phoenix/Netscape (uno incluye en el total el margin, padding y border y los otros se lo suman al valor definido). Total, que ahora tengo la pàgina bien "maquetada" para IE5 pero en los otros navegadores no.
¿Alguna solución para tenerlo todo controlado en ambos navegadores?
Me vueeeeeelvo locoooooo con esto..........
Os dejo un enlace para que proveeis como se visualiza con ambos navegadores........aviso, no està terminadaaaaaa.
CarlosJ
Creo que te refieres a esto:
www.tantek.com/CSS/Examples/boxmodelhack.html
Es un hack que han hecho para que explorer interprete el ancho igual que el resto.
De cualquier manera siempre se puede crear dos hojas de estilos distintas a la vieja usanza.
marcus
Gracias Carlos.....voy a probar,....., es queria evitar lo de dos hojas de estilo, pero si no hay más remedio....tendré que meterme en ello.....aunque no tengo ni idea de javascript y tampoco sabria cómo llamar a una o a otra en función del navegador detectado.....
En cuanto pueda, pruebo.....
orange
Con el hack que te comenta Carlos no necesitas meter dos hojas de estilo, va todo en la misma.
marcus
Si orange, ya lo he visto,.., mi respuesta era en caso de tener que montar dos hojas.....me lo he mirado, y en cuanto pueda lo pruebo...
gracias a los dos!
orange
pruébalo pero ya te digo que funciona.
Además ese error sólo le pasaba al IE5, y lo arreglaron pronto, pero es problema es que era el navegador por defecto con el WIN2000 y estuvo muy extendido
marcus
si ya,..., lo que passa es que aun sabiendo este problema, lo he maquetado todo testeandolo con el IE5, y al testearlo con Phoenix es cuando he caido en el error....es decir,..., que me toca remaquetar+testear con phoenix, y aplicar el hack este...pero bueno, todo tiene solución.......
por cierto, ya sé que salió el tema por encima en otro post, pero hay manera de que phoenix, etc,...aplique los estilos al scroll???
[joder, parece un consultorio, esto...gracias por adelantado ;)]
orange
No hay manera de que phoenix plique estilos al scroll, si quieres hacer eso tienes que crear el scroll por javascript
por otro lado, no hace falta que remaquetes todo el sitio, con unos cuantos cálculos bastaran
A ver ...
W3C.Box = width (o height) + padding + border + margin
IE5.Box = Width (o height) + margin
(creo , mirate exactamente el error, pero creo que mete en el width el padding y el border)
Por lo tanto solo tienes que hacer las cuentas y meter los valores correctos en el CSS
Es decir, para que el conjunto te ocupe lo mismo que antes, vamos a suponer una caja con estos valores
Width= 50 px; Padding = 2px; Border = 1px ; margin = 2px
Todo eso te ocupaba antes (cin IE5) = 52px
(aunque lo que ha pasado aqui no es un ejemplo de ello)ues ahora el
Para que con el Nets te ocupe lo mismo vamos a restarle lo que mete de más IE al width. Los valores serían
Width= 47px; Padding = 2px; Border = 1px ; margin = 2px
Eso te sigue dando como suma 52px
marcus
Ya,ya, orange,...lo de remaquetar lo digo en este sentido,...., a parte de los valores de los div, tambbien tendré que cambiar el de alguna tabla que tengo por allí....
Es la ventaja de las css, no?? (lo de separar contenido de presentación)
Me he asustado al visualizarlo desde IE5 en mac....nada que ver,......, el filete lila, etc.......
bueno, ya os lo enseño cuando lo tenga ya en marcha.
orange
Ya tio, tienes razón, es un coñazo volver a tocar estas cosas una vez que tienes todo el trabajo hecho ...
Animo!!, es lo bueno del CSS, imagina si tuvieras que hacerlo en toooodas las páginas
;)
Josh
os comparto mi zupertruco que me costo tres días de experimentación:
en la hoja de estilos meter
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
es una instruccion CSS3 pero que ya interpretan muchos navegadores
con eso tenemos el modelbox del IE en: IE >=5 Mozilla >=1, Opera >=7. Opera <7 no hace ni caso.
Para mi el modelbox del w3c no se ajusta a la realidad fisica.
orange
Hombre, puede ser que sea mas intuitivo el modelo de IE5, pero todos los navegadores interpretan ahora siguiendo al W3C (como debe ser además) ... forzarles a que utilicen un modelo que fué un BUG no me parece lo más correcto ¿no?
marcus
la verdad, es que creo que no es la solución,..., quizás si para algo inmediato, pero siempre serà mejor encontrar una solución según las directrices de la W3C, y aplicar un código correcto, no?
Aunque tengamos que cambiar el "chip" a la larga le sacaremos provecho (y satisfacción personal).
Josh
No, la solución que propongo se ajusta a las directrices del w3c, que se ha replanteado su modelbox y ha creado una instrucción especifica para que el desarrollador pueda elegir el modelbox con el que quiere trabajar.
orange
Hombre siendo asi ... habría que mirarlo, a mi también ma parece mas intuitivo el anterior
¿Viene eso en la especificacion CSS3?
Josh
En la vida real, cuando yo mido el ancho de una caja, incluyo su borde (el carton), su padding (el corcho anti golpes que hay dentro) y su contenido (un monitor o lo que sea). Fuera de la caja queda el margin, la distancia desde el carton a cualquier otro elemento exterior.
El w3c cuando mide el ancho de una caja solo mide el contenido, dejando fuera el margin, border y padding.
orange
YAYA, si yo lo tengo claro, es más intuitivo el de IE5, pero bueno, a parte de él todos interpretaban otras cosas
Si ahora se puede elegir, pues igual me quedo con eso, y además paso del hack para el IE
marcus
Joder, josh, tienes razón y además ya lo decias en tu primer comentario......si es así cómo dices, está claro, realmente es mucho más intuitivo cómo lo interpreta el IE5........gracias!
orange
Josh, hay que reconocerlo, eres un maestro, con esto:
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Se soluciona el problema y rula bastante bien.
Me alegra ver que también el W3C sabe cambiar las cosas cuando se ve que no tienen sentido.
Muchas gracias tio, buen trabajo
microbians Staff
Coño llevo años buscando eso grrrr XDDD
No veas la comidita de tarro para solucionar el problema de diferenciación de como miden con la genLIB en su tiempo... casi me vuelvo loco.
orange
Ya sabes, hasta ahora había que utilizar el hack de Tantek, pero parece ser que, como explica Josh, las cosas han cambiado en la especificación CSS3
:D
mini-d
Ese hack de Tantek "creo" que solo se aplica bien en layouts fijos... por ejemplo, si utilizo medidas porcentuales, div 10% div2 90% ese hack no contaría bien...
orange
Pues lo cierto es que no sé si ese hack con porcentajes, tendrás que probar.
Aunque yo ya no usaría el hack, utilizaría la fórmular que ha puesto Josh.