Consejos CSS

[Jacobgz]

Saludos a todos:

He estado diseñando una página y he tenido muchos problemas con el CSS. Resulta que en Firefox e IE 8 me la mostraba muy bien (Algunas pequeñas descordinaciones en IE que las arreglé mediante comentarios condicionales).

Bueno mi principal problema llegó cuando probé la página en Chrome, en Opera y en Safari. Mi página se veía muy mal en Chrome al punto que decidí crear una hoja de estilos especial para ese navegador, la forma de aplicarla era crear una función JavaScript que me detectaba el navegador, si el navegador es Chrome, aplica ese hoja de estilos. Lamentablemente aunque Safari y Chrome compartan el mismo motor WebKit en Safari habían varias descordinaciones que no pude arreglar facilmente así que decidí crear una nueva hoja de estilos para Safari (las nuevas hojas de estilo que voy creando son solo modificaciones es decir 5 lineas más de código que arreglan el problema en el navegador que lo está causando). En Opera la historia fue similar.

Siento que esto que estoy haciendo es una práctica horrorosa ya que ante cualquier cambio tengo que modificar cerca de 4 hojas de estilo y además dependo tremendamente de JavaScript para que mi página funcione... (si se desactiva JavaScript me quedo sin hoja de estilos )

Me podrían dar algún consejo de como podría modificar esta mala práctica teniendo en cuenta que es la primera página web que hago?

Gracias por adelantado.

[Carlangueitor]

Yo siempre he hecho una hoja de estilos para ie (versión 6 y anteriores, además de algún javascript para estas mismas versiones) y la "normal" para todos los demás navegadores, y nunca me a dado problemas, eso sí manejo un código validado y empiezo a maquetar en firefox. Si no comprendes mucho de CSS terminas haciendo el doble de lineas y pasas cosas como esta, quizá ese es el problema.

Saludos

[alexk]

wow jeje... pues yo suelo usar una sola hoja de estilos... me gusta tener todo junto per a la vez separado es decir...

en la misma hoja de estilos mi reset, fondos, posiciones, fuentes, colores, etc...
tener todo ordenado... y maquetar con FF e IE6 abiertos y comprobar cada movimiento basta...
para facilitar las cosas uso siempre mis mismas clases (extrañas jaja que solo yo entiendo y estoy acostumbrado con el tiempo) e imagino que siempre maqueto el mismo sitio una y otra vez... eso y tener todo tu codigo tanto HTML como CSS ordenado estructurado y valido no veo que necesites de JS... mas que para (PNG, :hover, y otros efectos jQuery y de mas..)
chao!...

[kisquian]

Primero que nada, te aconsejo utilizar un reset para hacer que los navegadores mas o menos funcionen parecido en cuanto a posicionamiento y etc.

Yo siempre utilizo Este

[FaustinoAsprilla]

Te recomiendo esta página que resume las diferencias en la interpretación del css entre IE y los demás:

IE vs. The Standards
http://www.positioniseverything.net/ie-primer.html

Y esta otra, que estoy seguro le ahorraría muchos dolores de cabeza a cualquiera:

The Box Model Problem
http://www.communitymx.com/content/article.cfm?cid=E0989953B6F20B41

Esta última explica un hack (sencillo) para no tener que usar diferentes hojas de estilos y mantener las dimensiones de los cuadros en los diferentes navegadores.

Saludos!

[danneg]

Pues tengo entendido que css fue creado para la mayor compativilidad posible y esto no tiene que pasar

Tal vez esto se valga a tus declaraciones de selectores que esten mal y por este motivo el mavegador lo reconoce como hack

[FaustinoAsprilla]

Iniciado por danneg

Pues tengo entendido que css fue creado para la mayor compativilidad posible y esto no tiene que pasar

Tal vez esto se valga a tus declaraciones de selectores que esten mal y por este motivo el mavegador lo reconoce como hack

Precisamente eso es, pero se arregla el problema de una forma simple. Qué culpa tenemos de que Microsoft quiera hacer las cosas al reves?

Ahi en el artículo explican muy bien como es el tema de las dimensiones de los divs y no es posible que se vean exactamente iguales con una sola hoja de estilos sin utilizar el hack (o javascript).

Saludos!

[Jacobgz]

Ante todo gracias por sus mensajes, los he estado leyendo a lo largo del día y todos me parecen muy interesantes.

El problema se ha dado principalmente por la plantilla que estoy usando:

[URL="http://www.csstemplatesfree.org/templates/DesignHQ/category.html"]http://www.csstemplatesfree.org/templates/DesignHQ/category.html[/URL]

Una plantilla que presenta un montón de código CSS creada por terceros es más difícil de modificar que una hoja de estilos creada por ti mismo. Si pueden prueben esta página en Firefox (donde se ve muy bien) y luego en Chrome (donde se ve muy mal) y en Opera (también se ve mal) para que vean a que me refiero (principalmente la página que dirige mi enlace).

Si me diera problemas con Internet Explorer estoy seguro de que lo podría solucionar sin muchos incovenientes, pero todo se me complica cuando se ve mal en otros navegadores que no admiten tantos hacks o comentarios condicionales ...

[alexk]

pues viendo el sitio el mejor consejo es que lo hagas de nuevo que no le veo mucho html y css pero bueno talvez estes acostumbrado ver el CSS en cascada... ami me gusta mas en linea como lo tiene ese... pero bueno