Diseñar con divs e ie 6

[Julcar]

hola gente, me encuentro en un problema, estoy realizando un trabajillo, donde debo maquetar una web desde un psd, todo bien, se ve perfecto en Opera, Safari, Chrome, Firefox, IE 8, IE 7, tanto a 800px como a mayor resolucion.
El problema es que el cliente la quiere tambien en IE 6!!!

la url es esta.

www.julcar.net/prueba/

necesito que al menos se vea bien formada, que predicamento....
Sobre todo porque yo vine a la web "después" de ie 6, y comence a maquetar para ie 7+ y no me conozco los trucos css que se usan para que el diseño encaje, no importa si necesito hacer otra css, el punto es que encaje en el difunto

si alguien puede explicarme qué falla y qué puedo añadir...

saludos y gracias.

[alexk]

Sobre todo porque yo vine a la web "después" de ie 6, y comence a maquetar para ie 7+

emmm... y?... despues de la semantica tambien?
que tienes algunas etiquetas un poco fuera de lugar pero bueno...

no me conozco los trucos css que se usan para que el diseño encaje

existen algunos hazlayouts que se aplicar para que la maqueta quede bien... es cuestion de buscar o por experiencias. en el foro se a tratado mucho.
PD: tambien un buen reset CSS

si alguien puede explicarme qué falla y qué puedo añadir..

yo desde FF veo que tan movidas algunas cosas como el texto del buscador, y que el header y footer tienen otro ancho a comparacion del contenido, asi que nose que esta bien para ti o que nop...

no importa si necesito hacer otra css

no creo que sea necesario ya que supongo que estas empezando y no es mal momento de volverlo a hacer como debe ser.

Solo para estar claros.. es mejor que hagas las preguntas que hagan falta sobre los problemas que tengas... uno por uno y te ayudamos... pero dar la url y que nosotros veamos que ta bien y que no.. pues tampoco haremos tu trabajo, solo podemos ayudarte asi que especifica y te ayudamos

[Julcar]

Iniciado por alexk

emmm... y?... despues de la semantica tambien?
que tienes algunas etiquetas un poco fuera de lugar pero bueno...


existen algunos hazlayouts que se aplicar para que la maqueta quede bien... es cuestion de buscar o por experiencias. en el foro se a tratado mucho.
PD: tambien un buen reset CSS


yo desde FF veo que tan movidas algunas cosas como el texto del buscador, y que el header y footer tienen otro ancho a comparacion del contenido, asi que nose que esta bien para ti o que nop...

no creo que sea necesario ya que supongo que estas empezando y no es mal momento de volverlo a hacer como debe ser.

Solo para estar claros.. es mejor que hagas las preguntas que hagan falta sobre los problemas que tengas... uno por uno y te ayudamos... pero dar la url y que nosotros veamos que ta bien y que no.. pues tampoco haremos tu trabajo, solo podemos ayudarte asi que especifica y te ayudamos

Lo que ves movidas las cosas en FF es para que se acoplen en medidas de 800 px (el cliente me dijo que tambien necesitaba a 800px) y lo de header y footer, es lo mismo, de eso no necesito fijarme por ahora porque ya está resuelto.

Indicame cuales etiquetas tengo fuera de lugar... el validador no me dice nada, agradeceria si me indicaras mis errores semanticos.

tengo ya experiencia con css, pero ie 6 ha sido algo a lo que he tenido bastante alejado y no me he preocupado de aprender cómo trabaja... Me gustaria que me digan si es mejor usar un reset mas avanzado, porque ese que uso me lo pasaron en este mismo foro.

Y no, no quiero que me hagan el trabajo, me creo capaz de hacerlo pero necesito una simple pista, he buscado por google pero no logro entender cosas como el clear:fix que ahora me entero se usó bastante en su epoca, y así, propiedades que me resultan nuevas.

Un recurso que no he probado es el grandioso !important, pero quiero evitar su uso en lo máximo.

Muchas gracias y un saludo.

[alexk]

bueno en cuanto a la semantica hay pequeñas cosas como un div vacio para simular el header
la etiqueta <label> aplicada incorrectamente ya que no es un elemento en bloque para cubrir al input, ademas que no es su funcion.
<label><input...></label>
en la navegacion "
"home Item 1 Item 2"
una lista desordenada no estaria mal... ya que veo que usas mucho span como para evitar usar divs bueno supongo.
usas un <h3> cuando no hay un <h2> ni <h1> previamente,
igual veo <br/> en el footer cuando solo necesitabas un margin-bottom...
enfin son pequeñas cosas que no afectan en lo visual y por ahora en la validacion, pero hay que tomarlas en cuenta.

y yap nose si se me fue una, pero bueno, para tu problema pues como te dije si indicas cual es el fallo en concreto se te puede ayudar mejor...

[Julcar]

Iniciado por alexk

bueno en cuanto a la semantica hay pequeñas cosas como un div vacio para simular el header
la etiqueta <label> aplicada incorrectamente ya que no es un elemento en bloque para cubrir al input, ademas que no es su funcion.
<label><input...></label>
en la navegacion "
"home Item 1 Item 2"
una lista desordenada no estaria mal... ya que veo que usas mucho span como para evitar usar divs bueno supongo.
usas un <h3> cuando no hay un <h2> ni <h1> previamente,
igual veo <br/> en el footer cuando solo necesitabas un margin-bottom...
enfin son pequeñas cosas que no afectan en lo visual y por ahora en la validacion, pero hay que tomarlas en cuenta.

y yap nose si se me fue una, pero bueno, para tu problema pues como te dije si indicas cual es el fallo en concreto se te puede ayudar mejor...

bueno, eran cosas que tenia un poco de apuro y dije: si el webmaster luego lo cambia por lo que necesite ahi. Lo del div como header lo aprendí de una web de css en mis inicios, decian que era el mejor truco y más sencillo para evitar usar un img/ además de que permite que otros elementos estén en el header.

en el foro tambien he visto temas donde el mismo mikmoro encierra inputs dentro de labels, no lo tengo en esta pc, pero lo tengo como marcador en el otro computador.

lo del h3, supongo que en un futuro tendra titulo y subtitulo, asi que el h3 me parecio más semantico a futuro.

Si ves la web con IE <= 6 verás que lo primero que falla es el menu, ¿que tengo que cambiarle a la botonera para que se vea por lo menos el fondo?

Todos los elementos li están flotados y en display inline, algo leí que Ie 6 no respeta el background de los elementos flotados y hay que darles un line-height pero no estoy seguro de eso...

¿qué recomiendas?

[Shawty]

Buenas,

Tienes varios problemas pero el principal en ie6 es que en toda tu web has utilizado em como tamaño de fuente y no lo has controlado.

Yo te recomiendo usar el font-size en px siempre, pero no te digo que si utilizas bien los em te salga bien igual, lo que pasa que para los que estamos empezando siempre es mejor asegurarse y poner el tamaño exacto en px. Con em lo que estas haciendo es poner (x ejemplo con 0'7em) el 70% del font-size que contiene la capa padre. Si no lo tienes bien controlado en el caso de ffx ie8 etc no habra problema xq te ponen el mismo size x defecto y se saltan algunas "chapucillas" de los programadores, xo en el caso de ie6 hay que tenerlo todo muy muy controlado y no saltarse nada.

Yo de ti empezaria poniendo bien las fuentes que te estan provocando muchos saltos de capas (divs) y luego vigilaria con los margins ya que ie6 los margins left/right muchas veces duplica su tamaño y hay que reducirlos incluso a la mitad. Por ejemplo margin-left:50px en ie6 seria _margin-left:25px (es cuestion de ver que margin te esta empujando mal la capa)


Espero que te sirva xa algo y almenos lo dejes un poco decente tu site en ie6 :)


Saludos

[Julcar]

Perfecto, ya voy recogiendo pautas para crear una nueva hoja de estilos...

¿El line-height lo recomiendan?

gracias

[paxarin]

Iniciado por Julcar

Perfecto, ya voy recogiendo pautas para crear una nueva hoja de estilos...

¿El line-height lo recomiendan?

gracias

Muy buenas, seguro que hay mejores explicaciones que la mia pero bueno hay la dejo por que nunca se sabe, jejeje.
Yo lo primero que use para que las web se vean lo mejor posible en IE sobre todo en versiones antiguas a sido el IETester, ya que permite saber como se ve la web en distintos IE, desde la consola puedes saber que hay que corregir en la hoja de estilos y para las imagenes hay un jquery para las imagenes png en IE6.
por cierto el link no funciona
Espero que esto sirva para algo.
Si es asi de algo valdran las horas delante del ordenador.
Un saludo

[Julcar]

Iniciado por paxarin

Muy buenas, seguro que hay mejores explicaciones que la mia pero bueno hay la dejo por que nunca se sabe, jejeje.
Yo lo primero que use para que las web se vean lo mejor posible en IE sobre todo en versiones antiguas a sido el IETester, ya que permite saber como se ve la web en distintos IE, desde la consola puedes saber que hay que corregir en la hoja de estilos y para las imagenes hay un jquery para las imagenes png en IE6.
por cierto el link no funciona
Espero que esto sirva para algo.
Si es asi de algo valdran las horas delante del ordenador.
Un saludo

ya tenia el ietester, pero de ie 6 recien me vengo a enterar como funciona, ya modifiqué la url. gracias.

[paxarin]

Iniciado por Julcar

ya tenia el ietester, pero de ie 6 recien me vengo a enterar como funciona, ya modifiqué la url. gracias.

Siempre que se pueda ayudar, ayudare.
Ya que tus ayudas me han servido mucho con el dichoso punbb,jejeje
Un saludo