Grandes problemas con Firefox

[Borjimante]

Hola, estoy diseñando una nueva versión de mi web, la pueden ver aquí:

www.antera-solutions.com/Diseno-nuevo-2007/

Y es que esta la página totalmente validada y todo pero es que en Firefox no se que pasa que se descuadra prcticamente todo.

He logrado arreglar bastante pero sigue habiendo fallos y no se de que es ya, he provado de mil maneras y nada, asique pongo aquí el tema para que me diga la gente como arreglar estos fallos.

Basicamente los problemas son:

-El div bajo en firefox no va hasta abajo del todo y no se por que
-El div linea-color-central se separa del resto del cuerpo, nose por que ocurre esto ya que no hay ni margin ni padding.
-En el header los divs se separan un poco descuadrando asi todo-
-Un pequeño huevo arrba del todo de una linea que sobresale.

Ayuda por favor haber si entre todos podemos arreglar estos fallos.

Un saludo.

[Borjimante]

nadie me puede ayudar con esto?

[PatomaS]

Hola

Cada una de las cosas que mencionas, las tienes definidas en alguna propiedad de las clases que has creado. Por ejemplo la barra central que sale a la izquierda se debe a un margin: 0 que tienes en la definición de la clase.

Te recomiendo que te instales la extensión "web developer" del firexo, esta te ayudará a ve que pasa. Otra buena extensión es "edit css", con la que podrás hacer cambios al css en el navegador y probar rapidamente que pasa.

Finalmente, te recomendaría, como forma de aprendizaje, que rehagas la página, primero sin contenido, solo posicionando las cajas en las zonas que las deseas, de esa forma puedes practicar rápido y fácil.

Felicidad

[Mikmoro]

Efectivamente, coincido en que el primer problema es que en tu selector #linea-color-central, te falta un margin: auto (tienes margin: 0pt;, y deberías tener margin: 0pt auto;).
La barra gráfica sale dos veces, una como fondo de la clase y otra como un img insertado, pero no sé si te has dado cuenta de que en IE te sale sólo una vez, la inferior.
Prueba a hacer ese cambio, a ver si se arregla, y si te parece seguimos con el resto según lo que ocurra.

Mikel.

[Borjimante]

Bien muchas gracias de momento ya he logrado quitar la barra esa.

Ahora falta el header y el bajo haber como hago para bajarlo hacia abajo del todo, teneis alguna idea?.

Un saludo

[3wstudio]

por lo q veo... te flata cerrar algun tag.... fijate en eso y se te va a emprolijar un poko

saludos

[Borjimante]

todos los div estan bien cerrados y todos los tag sino el validador me daria un error y no lo hace, que mas puede fallar?

[Mikmoro]

Buenas.
Viendo tu código, lo que veo es que sigues teniendo algunos divs que tienen una imagen como background en el selector y luego repetido como img dentro del html. Creo que deberías arreglar esto primero. No sé por qué lo estás haciendo así, pero te ocurre en varios, y no es correcto.

Otra cuestión: veo que marcas el ancho del contendor principal (global) y algunos otros en "em". No me parece mal, pero ten en cuenta una cosa: tus gráficos tienen tamaño fijo en "px", de manera que si alguien tiene un tamaño de letra predeterminado que no sea 16px (como tu), el tamaño de los contenedores crecerá o se reducirá hasta los 43.7em que marcas de ancho según el tamaño de letra que tenga, mientras que tus gráficos seguirán estáticos, de manera que todo se descompondrá. Supongo que no es lo que quieres, así que te sugiero que revises eso también y luego veamos qué problemas de maquetación con css tienes y te ayudemos a buscar soluciones entre todos, una vez que tu código esté más bien limpio.

Mikel.

[Borjimante]

si, gracias ya he quitado los backgrounds. Lo de los em, es por que la accesibilidad n deja poner medidas absolutas como em, es por eso mas que nada yo antes trabajaba con px que era mas sencillo.

Haber como mas arreglo lo del bajo haber si me puedes ayudar

Un saludo

[Borjimante]

alguien tiene alguna idea?

[Borjimante]

nadie sabe como puedo arreglar esto?

[Mikmoro]

Hola otra vez, Borjimante. Sigue habiendo errores como por ejemplo que tienes una clase repetida en la css "#barra-header-arriba", y que en el html hay una clase que no tiene reflejo en la css "<div id="bajo-barra">".

No obstante, creo que hay un problema mayor: tu gráfico de cabecera y pie miden 699 pixels. Al haber hecho tu contenedor principal en "em", concretamente con 43.7em, no miden exactamente lo mismo en pixels. Parece una chorrada, pero si te fijas en Firefox, tanto el de cabecera como el del pie no sólo no llegan arriba o abajo, sino que además muestra un poco de borde blanco a la derecha del gráfico (a la derecha del triángulo gris), porque es un poco más pequeño de ancho que el "cuerpo". Y esto no lo podrás arreglar con css a menos que cambies el tamaño del cuerpo o el tipo de medida.

¿Por qué los distintos navegadores interpretan de distinta forma los "em"? Ni idea, pero es así, no son exactos. Esto junto con el problema que te comenté al redimensionar la letra se suele resolver de esta forma: se corta el gráfico en tres trozos (esquina izquierda, centro y esquina derecha), y se posicionan por separado, para que aunque tu caja crezca, el gráfico siempre salga bien, y además así se garantiza que siempre llegará a cubrir perfectamente los lados, sin preocuparte de las medidas.

Creo que este problema de origen produce que el resto de arreglos que se te propongan vayan a ser simples apaños. No te digo nada de lo del pie porque no solucionaría nada.

Seguramente alguien como bhagat te podrá dar algún buen enlace (como los excelentes que suele poner en sus mensajes), por si tienes dudas de cómo solucionar esto, pero creo que te deberías plantear revisar bien a fondo el código y partir de cero. Claro, es mi opinión.

Mikel.

[Borjimante]

ya he arreglado lo de abajo me queda lo del header y los bordes de arriba y abajo blancos de 2px o asi que no se por que se pone, ayuda

[Borjimante]

Ya he arreglado tambien lo de los bordes solo me queda que el border-left de de la columna derecha llegue hasta el final y que no aparezcan huecos en el header

[edudw]

Hola, le dí un vistazo, pero parece que ya lo tienes resuelto.

[Borjimante]

pero en firefox no llega hasta abjo del todo

[edudw]

Hola, si lo que quieres es que no se vea espacio pon este estilo:


#global {
margin: auto;
text-align: center;
padding-top: 1.5em;
}

Como ves le quite el padding-bottom.

Otra cosa es que tienes codigo como esto "<div style="" id="bajo">", deberías cambiarlo por <div id="bajo">.

Saludos.

[JBRS]

Con Safari de Mac se ve a trozos abajo. Me meto en esto porque hoy he empezado a adaptarme a CSS y ha sido frustrante: lo que se veía de una forma en explorer se veía de otra radicalmente diferente en firefox y de otra en mac... ¿de verdad hay esperanza de hacer algo que valga para todas? ¿cómo puedo orientarme sobre la compatibilidad?

[edudw]

Es fustrante, pero te recomiendo que comiences con webs de layout no tan complicado. No se te ocurra decir por ejemplo, "ya el sitio de este cliente lo hago con css..." si nunca has hecho uno antes.

Se debe practicar bastante, pero al final se aprende.