Fondo en DIV: IE OK - FF Incorrecto

Kainan · #1 (**permalink**) 10/07/2007, 05:57

Hola a todos.

Luego de buscar por la Web, no logré encontrar con éxito una solución para mi extraño problema.

Os dejo las fotos para que vean más o menos de que se trata:

Web en IExplorer: http://img512.imageshack.us/my.php?image=ieyp5.jpg

Web en Firefox: http://img443.imageshack.us/my.php?image=ffys0.jpg

Bien, pues esto es lo que hay. No puedo hacer que en FF se vea el fondo de pantalla como en el IExplorer (por cierto, la cosa negra de la derecha es la scrollbar, no temáis :P). En el Explorer, ese fondo está fijo cuando voy a hacia abajo con la barra de desplazamiento, pero en Firefox, no sé porqué, no sólo no lo muestra bien, ¡sino que incluso coge el fondo del footer y lo mete en el div de arriba! Es algo de locos, y lo peor es que no sé porqué lo está haciendo así... ya intenté de todo :(

Dejo el código de ese div + CSS por las dudas:

Código:

<div id="Marcotodo" class="marcotodo">
<div id="ColumnaIzq" class="marcotextoizq">
<p class="texto2" align="left"><br><br><br><br><br><br><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>-</b> Links<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>+</b> Contacts<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>·</b> <a href="#">Otro link</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>·</b> <a href="#">Otro link</a><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>+</b> Contacts<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>·</b> <a href="#">Otro link</a><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<b>·</b> <a href="#">Otro link</a><br>
</div>
<div id="ColumnaDer" class="marcotextoder">
<p class="texto3" align="justify">Aquí va el texto, pero lo quité :D</p>
</div>
<div id="disclaimer" class="footie" height="20">
<p align="center" class="textodisclaimer">« copyright by afoot® web team ~ optimized for 1280x1024 resolution and Mozilla Firefox »</p>
</div>

CSS:

Código:

.marcotextoizq { width: 135px; height: 558px; valign: top; background: url(images/FondoMenu1.jpg); float: left; margin-top: 

0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; border-bottom-width: 1px; border-bottom-width: 1px; }

.marcotextoder { width: 865px; height:558px; overflow: auto; valign: top; background: url(images/FondoTexto2.jpg) no-repeat; 

float: right; background-attachment: fixed; display: block; }

.marcotodo { width: 1000px; height: 558px; margin: auto; padding: auto; }

.footie { border: 1px solid #535E1D; background: url(images/Fondo_Disclaimer.jpg); padding: 1px; }

Aprecio mucho cualquier consejo. ¡Buena suerte y hasta luego!

EDIT: También decir que si pongo un background sin nada (o sea, background: imagen, y ya está) en Firefox funciona bien, pero en Internet Explorer se repite, perdiendo el efecto que busco.

marcelomdsc · #2 (**permalink**) 10/07/2007, 10:48

la verdad que mirando el codigo asi no sabria decir cual es el problema, de todos modos cuando tenes problemas con tu pagina en firefox, 9 de 10 veces, por no decir todas, es cupla del disenador.
Es que el que siempre causa problemas es IE, entonces me imagino que mientras creabas tu pagina la estabas provando en IE.
De ser asi, eso es una mala idea, lo mejor es ir probando tu pagina en FF y despues que terminas, vas a IE y arreglas los problemas de Ie con hacks.
No es por nada que no hay hacks para FF

Kainan · #3 (**permalink**) 10/07/2007, 11:00

Pues eso es lo raro, no sé si te fijaste al final pero dice que está optimizada para Firefox, ¡porque lo iba probando con eso y funcionaba bien!

Lamentablemente, tenía 40 problemas con Explorer que solucioné facilmente (por medio de código, nada de hacks :P), pero en esto no puedo hacerlo funcionar correctamente en sendos navegadores...

¿Qué necesitas del código para ver qué pasa?

EDIT: Nada, nada... seguí tus consejos y apliqué un hack para que IExplorer no lea una línea de CSS y ahora funciona en los dos.

¡Gracias por tu ayuda, marcelomdsc! :D

marcelomdsc · #4 (**permalink**) 10/07/2007, 11:43

bueno, en realidad es un problema 'complicado', lo que digo es que cuando no hay un error obvio en el codigo, la forma de encontrar el error es probando, una buena forma de hacer eso es, ir sacando propiedades del css y ver cuando deje de funcionar mal para saber cual es la propiedad que esta causando el problema.

Muy bien con el tema de probarla en ff mientras la creas!

Cita:

(por medio de código, nada de hacks :P)

Justamente ese es el problema, que al no usar hacks, es como volver al principio y empezar a probar la pagina en Ie, entones sino usas hacks, solucionas el problema con ie y despues funciona mal en ff, solucionas en ff y funciona mal en ie.

por eso estan los hacks, porque ff funciona bien, cuando hay diferencias entre los exploradores SIEMPRE es un problema con ie entonces por eso hay hacks para ie, entendes? No esta mal usar hacks para ie, siempre y cuando no haya solucion de otra forma.

por ejemplo si miras mi pagina, la de la firma. Vas a ver que funciona bien en todos los exploradores porque esta bien disenada y no usa muchas cosas complicadas. La unica pagina que tiene hacks es 'links'.

te explicaria todo ahora pero no se si estas interesado...hay dos formas comunes de hacer hacks para ie...te los explico si te interesa.

Kainan · #5 (**permalink**) 10/07/2007, 13:36

Pues la verdad es que Google me iluminó bastante y no quisiera molestar mucho tampoco, hehe.

De todos modos, debo retractarme, porque encontré un hack para IE6 y logré hacerlo funcionar bien, pero el código volvió a morir cuando lo probé con IE7 (como odio este explorador...).

Aparentemente, queda igual que en FF cuando usaba el código antiguo (el que funcionaba mal con FF), pero el código en el que FF funciona bien, ¡tampoco sirve para IE7!

Y por cierto, el valor que destroza el fondo es claramente "background-attachment: fixed;", pero no doy encontrada la forma para ubicarlo bien en IE7 ahora... lo logré en IE6 y FF, pero IE7 me trae loco.

Me estoy volviendo loco... a ver si encuentro la solución pronto o tendré que hacer un mass spam con emails a Microsoft por ser tan... burros :P

marcelomdsc · #6 (**permalink**) 11/07/2007, 10:28

bueno....no te vuelvas mas loco que la solucion es muy facil...
una forma de usar hacks se llaman "IE if conditional statements".
Y basicamente es agregar un codigo en el 'head tag', que aplica estilos solo a ie7, 6 o 5 (y nose si versiones anteriores).

Por ejemplo
<link href="../../main.css" rel="stylesheet" type="text/css" />




En ese caso, tenes la primer hoja de estilos que afecta a todos los navegadores. Y los otros solo afectan a cada version especificada (el ultimo es para ie 5.5)
Y no es nesesario poner un link podes poner los estilos ahi mismo.
Ademas ie igual va a ver la primer hoja de estilo, entonces en las otras no tenes que repetir todo sino que solo hacer los arreglos nesesarios para ese explorador....'hacks'.

Kainan · #7 (**permalink**) 11/07/2007, 13:09

Sí, más o menos eso fue lo que hice para solventar lo de IE6 y logré conseguir un código que funcionaba.

El problema es que no encuentro un código que me funcione para IE7... ahora mismo lo tengo metido a machete con background-position:67% 60%;, pero cuando aparece una pequeña cosa en la ventana, ya se me deforma el fondo... ¿hay alguna manera de FIJAR el fondo con un background-position (el background: fixed no funciona con este fondo y Imi E7)?