¿No funciona en Firefox background-repeat?

mcloud · 4 Ene 2009

A ver si alguien puede ayudarme a entender porqué no se vé igual un estilo en IE y en Firefox.

Intentaré explicar el problema que tengo. Estoy haciendo un estilo, el cual tiene en el header varias celdas, el problema es que con IE se visualiza como si fuera fluid y en Firefox como si fuera fixed.

Creo que el problema está en la primera de las celdas que podeis ver en las imágenes que adjunto. En IE se repite hasta llenar todo el ancho de la pantalla, pero en Firefox no ocurre eso. Son las celdas <td class=head_05> y <td class=head_18>. ¿Será que no funciona background-repeat con Firefox?

La imagen bnr_04_tile.gif tiene 2px de ancho y la bnr_12_tile.gif 8 px de ancho

El código es el siguiente:

CSS:

HTML:

td.head_01{width:51px;height:187px;}
td.head_02{width:50px;background-image:url("http://www.vbhispano.com/foros/images/misc/bnr_02.gif");background-repeat:no-repeat;}
td.head_03{width:51px;background-image:url("http://www.vbhispano.com/foros/images/misc/bnr_03.gif");background-repeat:no-repeat;}
td.head_04{width:51px;background-image:url("http://www.vbhispano.com/foros/images/misc/bnr_04.gif");background-repeat:no-repeat;}
td.head_05{background-image:url("http://www.vbhispano.com/foros/images/misc/bnr_04_tile.gif");background-repeat:repeat-x;}
td.head_06{width:51px;height:75px;}
td.head_07{width:51px;background-image:url("http://www.vbhispano.com/foros/images/misc/bnr_u_01_02.gif");background-repeat:no-repeat;}
td.head_08{width:51px;background-image:url("http://www.vbhispano.com/foros/images/misc/bnr_u_02.gif");background-repeat:no-repeat;}
td.head_09{width:51px;background-image:url("http://www.vbhispano.com/foros/images/misc/bnr_u_03.gif");background-repeat:no-repeat;}
td.head_10{width:51px;background-image:url("http://www.vbhispano.com/foros/images/misc/bnr_u_04_01.gif");background-repeat:no-repeat;}
td.head_11{width:51px;background-image:url("http://www.vbhispano.com/foros/images/misc/bnr_05.gif");background-repeat:no-repeat;}
td.head_12{width:51px;background-image:url("http://www.vbhispano.com/foros/images/misc/bnr_06.gif");background-repeat:no-repeat;}
td.head_13{width:51px;background-image:url("http://www.vbhispano.com/foros/images/misc/bnr_07.gif");background-repeat:no-repeat;}
td.head_14{width:51px;height:83px;}
td.head_15{width:50px;background-image:url("http://www.vbhispano.com/foros/images/misc/bnr_10.jpg");background-repeat:no-repeat;}
td.head_16{width:51px;background-image:url("http://www.vbhispano.com/foros/images/misc/bnr_11.jpg");background-repeat:no-repeat;}
td.head_17{width:51px;background-image:url("http://www.vbhispano.com/foros/images/misc/bnr_12.gif");background-repeat:no-repeat;}
td.head_18{background-image:url("http://www.vbhispano.com/foros/images/misc/bnr_12_tile.gif");background-repeat:repeat-x;}
td.head_19{width:51px;background-image:url("http://www.vbhispano.com/foros/images/misc/bnr_13.gif");background-repeat:no-repeat;}
td.head_20{width:51px;background-image:url("http://www.vbhispano.com/foros/images/misc/bnr_14.jpg");background-repeat:no-repeat;}
td.head_21{width:51px;background-image:url("http://www.vbhispano.com/foros/images/misc/bnr_15.jpg");background-repeat:no-repeat;}

TABLA:

HTML:

<td><table width=100%" border="2" cellspacing="0" cellpadding="0">
       <tr>
         <td class=head_05>&nbsp;</td>
         <td class=head_11><img src=images/misc/spacer.gif alt="" width="51" height="1"></td>
         <td class=head_12><img src=images/misc/spacer.gif alt="" width="51" height="1"></td>
         <td class=head_13><img src=images/misc/spacer.gif alt="" width="51" height="1"></td>
         <td class=head_01><img src=images/misc/bnr_08.gif alt="" width="51" height="187"></td>
       </tr>
       <tr>
         <td class=head_18>&nbsp;</td>
         <td class=head_19><img src=images/misc/spacer.gif alt="" width="51" height="1"></td>
         <td class=head_20><img src=images/misc/spacer.gif alt="" width="51" height="1"></td>
         <td class=head_21><img src=images/misc/spacer.gif alt="" width="50" height="1"></td>
         <td class=head_14><img src=images/misc/bnr_16.gif alt="" width="51" height="83"></td>
       </tr>
     </table></td>

IMAGENES:

Internet Explorer

Firefox

Para cualquier aclaración, no dudeis en preguntar.

Ah!, ya sé que podría hacerlo con tablas, sin utilizar clases CSS, pero esto me tiene un poco confundido y quisiera aclararlo.

Un saludo

imported_Gasper · 4 Ene 2009

Usa:

Insertar CODE, HTML o PHP:

td.head_05{background:url("http://www.vbhispano.com/foros/images/misc/bnr_04_tile.gif") repeat-x;}

Insertar CODE, HTML o PHP:

td.head_18{background:url("http://www.vbhispano.com/foros/images/misc/bnr_12_tile.gif") repeat-x;}

mcloud · 4 Ene 2009

Lo había probado tambien así, pero no cambia nada.

imported_Jhonnyf · 5 Ene 2009

veo que la tabla esta dentro de otra tabla (TD) no estará por ahi tu problema?, osea. el 100% de tu tabla es el ancho maximo de ese TD

mcloud · 5 Ene 2009

La tabla que contiene todo el header tiene un ancho del 100%, por lo que creo que por ahí no está el problema.

Lo que me tiene confundido es que en IE el ancho del header se acopla al ancho de la ventana, como no podía ser de otra manera, pero no ocurre así con el Firefox.

Pensé que quizás hubiera problemas con el repeat, pero realmente si que se repite, aunque no todo lo que debiera.

Parece como si en algún sitio hubiera un ancho que delimita al header, pero no lo hay.

Volveré a revisar todo el código, a ver si se me escapó algo.

Ah! Feliz Año Nuevo Jhonnyf. Me alegra verte de nuevo por aquí después de estas fiestas

imported_Gasper · 5 Ene 2009

Veo que en el ancho falta un ":

Insertar CODE, HTML o PHP:

<td><table [COLOR=Red]width=100%"[/COLOR] border="2" cellspacing="0" cellpadding="0">
       <tr>
         <td class=head_05>&nbsp;</td>
         <td class=head_11><img src=images/misc/spacer.gif alt="" width="51" height="1"></td>
         <td class=head_12><img src=images/misc/spacer.gif alt="" width="51" height="1"></td>
         <td class=head_13><img src=images/misc/spacer.gif alt="" width="51" height="1"></td>
         <td class=head_01><img src=images/misc/bnr_08.gif alt="" width="51" height="187"></td>
       </tr>
       <tr>
         <td class=head_18>&nbsp;</td>
         <td class=head_19><img src=images/misc/spacer.gif alt="" width="51" height="1"></td>
         <td class=head_20><img src=images/misc/spacer.gif alt="" width="51" height="1"></td>
         <td class=head_21><img src=images/misc/spacer.gif alt="" width="50" height="1"></td>
         <td class=head_14><img src=images/misc/bnr_16.gif alt="" width="51" height="83"></td>
       </tr>
     </table></td>

mcloud · 5 Ene 2009

Parece no haber manera de que IE y Firefox muestren igual la cabecera.

Aquí adjunto el código de la cabecera y las imágenes para que podais verlo mejor. He elimiando del CSS lo que no afecta, para que haya menos código

Creo que al final tendré que hacerlo sin css, aunque me da rabia no encontrar el error.

Gracias por vuestra paciencia.

Un saludo

imported_Elmer · 6 Ene 2009

mcloud,
tu código no esta muy bien escrito, deberías encerrar cada valor en comillas, si lo pusiste así a proposito entonces ignora lo que digo

.
Esas imágenes de arriba son capturas de tu estilo actual? podrias ver el codigo fuent de esa parte y pegarlo acá? otra cosa no le des width: ni height: con css, utiliza width="x" y height="x" directamente en las etiquetas html. No utilizes height para nada, el alto de la imagen hará que la celda quede en su lugar.

Si lo que quieres esque la primera celda se alargue al 100%, entonces dale width="100%" solo a esa celda a las demás dales un ancho fijo pero no por css.

Si quieres dar ancho por css, mejor crea un div dentro de la celda, haslo un bloque y le das height: y width: y a ese div le das un background no repeat de tu imágen, así no utilizas <img dentro de la celda y en ves se lo das al div... no se si me entiendas.

Si puedes pon acá todo el código de esa parte

Insertar CODE, HTML o PHP:

<td><table width=100%" border="2" cellspacing="0" cellpadding="0">
       <tr>
         <td class=[COLOR=Red]head_05[/COLOR]>&nbsp;</td>
         <td class=[COLOR=Red]head_11[/COLOR]><img src=[COLOR=Red]images/misc/spacer.gif[/COLOR] alt="" width="51" height="1"></td>
         <td class=[COLOR=Red]head_12[/COLOR]><img src=[COLOR=Red]images/misc/spacer.gif[/COLOR] alt="" width="51" height="1"></td>
         <td class=[COLOR=Red]head_13[/COLOR]><img src=[COLOR=Red]images/misc/spacer.gif[/COLOR] alt="" width="51" height="1"></td>
         <td class=[COLOR=Red]head_01[/COLOR]><img src=[COLOR=Red]images/misc/bnr_08.gif [/COLOR]alt="" width="51" height="187"></td>
       </tr>

mcloud · 6 Ene 2009

Perdón, se me olvidó añadir el adjunto con el código y las imagenes. Ahora si está.

Gracias Elmer, revisaré eso que me dices.

imported_Elmer · 6 Ene 2009

Elimita POSITION: absolute; de tu div, el q sta despues de <body>
o sea que quede asi:

HTML:

<DIV style="LEFT:0px; TOP:0px">

eso hara que se haga fluid para ambos navegadores, y si lo quieres fixed, utiliza el div que te dejo abajo

HTML:

<DIV style="width: 900px; margin-left:auto; margin-right:auto;">

mcloud · 6 Ene 2009

Ahí estaba el problema!!!!

Había buscado como loco que era lo que causaba el problema en Firefox. En ningún otro estilo me había pasado esto.

Ahora parece tan fácil la solución!

Gracias Elmer. Te debo una