Problemas en la muestra de FFox

Black_River · #1 (**permalink**) 07/08/2008, 03:22

Hola!

Estoy cambiando el diseño de mi página web y la estoy haciendo completamente con divs. Por fín me atreví...

Bueno, la he estado haciendo y la previsualizaba con IE ya que al pulsar F12 es el que me salía...

Ahora bien, el susto que me he pegado al subirlo y abrirlo con firefox. Los paddings se vuelven locos y el contenido se me desmorona. Probé sustituyéndolo por una tabla dándole width 100% pero tampoco me respeta el padding y se me pega al menú.

Aquí os dejo un enlace: http://www.pesite.es/index-v3.php

Qué errores me veis? Yo pensaba que mi CSS era correcto hasta el momento... :S

Saludos y gracias!

Black_River · #2 (**permalink**) 07/08/2008, 10:38

Creo que ya sé a qué se debe el error....

Interpreta FFox la medida de un div así?:

Imaginaos un cuadrado de 100px, de ahí, le ponemos un padding en cada lado de 10px.
En IE, la capa continuará teniendo 100px, sin embargo, en firefox sacará una capa de 120px.

Estoy en lo cierto? Siempre pasa esto? :?

Mikmoro · #3 (**permalink**) 07/08/2008, 11:25

No, no es así. Ambos mostrarán una caja de 120px.

Sí es así pero al revés con el borde, es decir: una caja de 100px con un borde de 10px, FF mostrará un total de 120px, mientras que IE mostrará un total de 100px, con un "interior" de 80px.

Revisa tu enlace que no funciona.

Black_River · #4 (**permalink**) 07/08/2008, 12:04

Estás seguro Mikmoro?

El enlace debe de funcionar, es correcto :S

Fíjate en el CSS, los width de IE están puestos como _width y todos tienen como...8px más que los width (para FFox)

Saludos y gracias por tu atención

Mikmoro · #5 (**permalink**) 07/08/2008, 12:08

Cita:

Iniciado por Black_River

Estás seguro Mikmoro?

El enlace debe de funcionar, es correcto :S

Fíjate en el CSS, los width de IE están puestos como _width y todos tienen como...8px más que los width (para FFox)

Saludos y gracias por tu atención

Pero eso no tiene por qué ser por el padding. Y sí, estoy completamente seguro de que eso funciona así, al menos con un doctype normal como transitional (aunque ahora que lo pienso, no sé si preguntabas si estoy seguro a lo del padding y el borde o a lo del enlace).

Por otro lado, esta es la respuesta que obtengo a tu enlace:

Cita:

You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '' at line 1

Black_River · #6 (**permalink**) 07/08/2008, 13:21

Hola de nuevo Mikmoro,

Perdona por el error en la página, fue un descuido mío.

Si tienes tiempo, mira la hoja de estilos de la página y verás cómo (en mi caso) los paddings deben de funcionar diferente con IE y FF.

Igual es que no termino de ver yo otro desajuste, pero he tenido que hacerlo así para que me cuadre en ambos navegadores

Mikmoro · #7 (**permalink**) 07/08/2008, 14:44

No te has fijado en esta parte de mi comentario:

Cita:

estoy completamente seguro de que eso funciona así, al menos con un doctype normal como transitional

Tú no estás usando ningún doctype, y en ese caso es posible que los interprete de distinta manera, porque IE entra en "quirks mode", e interpreta las cosas todavía más a su aire de lo normal.

De todas maneras con IE6 sigues teniendo un problema con la columna central.

Black_River · #8 (**permalink**) 07/08/2008, 15:19

Hola Mikmoro!

Perdona que te maree tanto...

Desconocía por completo lo del doctype. He indagado por internet pero encuentro mil cosas. Qué debería poner? O estaría bien con <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">?

Me podrías poner un pantallazo de cómo se ve en IE6? A ver qué me falla... :S

Ahora mismo, viéndolo desde IE7 y FF está casi tal y como me gusta. Me queda hacer que el menú izquierdo se alargue hasta abajo cosa que no consigo... :p

Gracias por tu dedicación!!

Mikmoro · #9 (**permalink**) 07/08/2008, 16:58

El doctype más habitual es este:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >

Si quieres validar tu web y demás deberás usarlo.

Con las modificaciones que has hecho ahora se ve bien en IE6. Hay una extensión para firefox que se llama Total Validator, que entre otras cosas te ofrece capturas para muchos navegadores.

Y lo del menú hasta abajo no creo que lo puedas hacer. En su caso, necesitas cambiar un poco de estrategia, con una de estas dos opiciones:

1.- puede meter el div contenido dentro del div menú para que este se estire. No hay que cambiar mucho, sólo tienes que encerrar los enlaces en otro div para poder colocarlo donde está ahora.

2.- Puedes poner un envoltorio al div contenido, que sólo contenga la misma imagen de fondo y el color que el menú, para que al estirarse el contenido su envoltorio también lo haga. No es difícil, y sólo tendrás que hacer muy pequeños retoques en la css.

Espero que te sirva.

Mikmoro · #10 (**permalink**) 07/08/2008, 17:26

Por si tienes dudas:

delante del div #contenido pones por ejemplo

<div id="envoltorio">

y lo cierras detrás del cierre de #contenido, de manera que éste queda dentro de él.

Ahora añades este selector a la css

#envoltorio {background-image: url(images/v3/menu_izq.gif);}

y la parte izquierda quedará con el gráfico hasta abajo como querías.

En firefox funcionará a la primera. Habrá que ver si hay que hacer algún retoque para IE.

Black_River · #11 (**permalink**) 08/08/2008, 02:58

Buaf!
Excelente Mikmoro, ya se muestra totalmente bien en los navegadores que probé :)

Gracias por tu ayuda, sin tí la página no hubiese llegado a completarse :p :)

Mikmoro · #12 (**permalink**) 08/08/2008, 03:38

Cita:

Iniciado por Black_River

Buaf!
Excelente Mikmoro, ya se muestra totalmente bien en los navegadores que probé :)

Gracias por tu ayuda, sin tí la página no hubiese llegado a completarse :p :)

Bah, seguro que sí, pero igual un poquillo más tarde

Me alegro de que te haya servido. Hasta la próximas.

Saludos.