optimizando css para los navegadores mas utilizados

[cristian_cena]

Hola Comunidad!



Primero aclarar que este proyecto se podria definir como un hijo de Foros del Web puesto que es fruto de su constante apoyo. Motivo por el que agradezco de corazón a todos ustedes que forman parte de este foro de altísimo nivel.



Bueno, vamos al grano, el sitio estaría funcionando perfecto salvo por algunas cuestiones:


1- Todavía no reemplazé el menú desplegable JavaScript por uno echo en CSS, lo cual no permite que funcione en IE 6 (punto que me recomendó alexk y todavía no hice tiempo de hacerlo. perdón alexk )


2- No entiendo el motivo de porque es tan pesado el sitio, será la imagen "de fondo" que pesa 800 kb? Debo aprender algo sobre peticiones al servidor no? (estoy aprendiendo JavaScript y vi en el foro que con ajax optimizan las peticiones http-request)



3 - Testeado en:

Firefox v3.5.2 : Funciona. Altera levemente hacia tonos azules los colores de los archivos JPG.


Zafari v4.531.9.1: Funciona. Las capitulares se vienen hacia abajo.


Google Chrome v1.2.183.7: Funciona. No toma la imagen la imagen.


Internet Explorer v6.0 : Resultado muy malo. No renderiza la imagen, no toma las hojas de Javascript, No toma las propiedades CSS3 border-radius y opacity, altera los archivos PNG.


Opera v9.6: Funciona. No toma la propiedad CSS3 border-radius.


Enlace al sitio: http://www.inicio2770.com.ar/inicio.html


Saluda y agradece, este principiante de xhtml y css que día a día se va superando gracias a FDW!


P/D: Acabo de leer que es conveniente usar algun "reset CSS" ¿cual se recomienda?, También estoy investigando sobre "hasLayout" pero no lo he aplicado nunca todavía, ¿sera este el momento?

[kseso?]

Sobre las letras capitulares, creo que te será interesante este tema, observa que según sea la posición declarada crecen en una dirección u otra (las gracias a PatomaS)
En ie6, ni esa, ni opacity ni la transparencia en png ni muchas otras cosas las entiende. Por ahí recomiendan este script para ese y otros bugs.

Todas las propiedades que comienzan por "-moz" son propietarias de FF, así que deberás utilizar las propias de los demás navegadores que tienen las suyas:

-moz-border-radius: 10px 0px 0px 10px;
-khtml-border-radius: 10px 0px 0px 10px;
-webkit-border-radius: 10px 0px 0px 10px;
border-radius: 10px 0px 0px 10px;

Sobre la imagen no lo he mirado (para más tarde) y el cambio en los tonos azules en ff, creo que te será interesante esta información sobre la gestión de color de ff de Tripiyon

Un saludo

Sobre la imagen:
es excesivamente pesada, y de unas dimensiones a todas luces exageradas (+ de 4000px) y más teniendo en cuenta que aunque "fija", queda inmediatamente ocultada por el fondo blanco de #content.
Una medida máxima podría ser o bien los 48em del footer y además recortar todo el espacio blanco que la bordea.

[cristian_cena]

Muchísimas gracias maestro Kseso.

Creame que ya no se como agradecer sus tantas respuestas! y la calidad de ellas.

[cristian_cena]

sabes que? la imagen no se muestra en el explorer ni en chrome, que raro no?