Tema: Problema con el fondo de una tr en IE7
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 06/09/2010, 12:24
Timak
 
Fecha de Ingreso: marzo-2009
Mensajes: 18
Antigüedad: 15 años
Puntos: 0
Problema con el fondo de una tr en IE7
Hola.

Tengo un problema que me vuelve loco y no encuentro dónde está el fallo. Tengo una imagen de fondo con 2 colores distintos y que lo pongo en una tr de una tabla (es decir, será el fondo de cada fila) Y otra imagen con los mismos colores que cierra a la anterior (o sea, que tenga la apariencia de un botón).

El problema reside en que en IE7 el 1º color me aparece repetido en la 2º columna y no debería ser así, debería ser exactamente igual a como aparece en Firefox: el 1º color en la 1º columna y el 2º color en la 2º columna.

Os pego el código html y css y os subo las imágenes de fondo:

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <link rel="stylesheet" type="text/css" href="style.css" />
  6. <title>Modal</title>
  7. </head>
  8.  
  9. <body class="modal">
  10.     <table class="tabla1" summary="Tabla" cellspacing="0">
  11.         <caption>PROBANDO</caption>
  12.         <tr>
  13.             <th scope="col" class="ancho1"></th>
  14.             <th scope="col" class="ancho2"></th>
  15.         </tr>
  16.         <tr class="fondo">
  17.             <td class="titulo">Probando:</td>
  18.             <td>Resultado</td>
  19.         </tr>
  20.         <tr class="cierre"><td colspan="2">&nbsp;</td></tr>
  21.         <tr class="fondo">
  22.             <td class="titulo">Probando:</td>
  23.             <td>8:00 a 15:00</td>
  24.         </tr>
  25.         <tr class="cierre"><td colspan="2">&nbsp;</td></tr>
  26.         <tr class="fondo">
  27.             <td class="titulo">Mas largo:</td>
  28.             <td>Probando a poner un texto más largo que el ancho fijado en la th. Pero no funcionara en IE7 y no se como resolverlo. Pido ayuda al Foro del Web.</td>
  29.         </tr>
  30.         <tr class="cierre"><td colspan="2">&nbsp;</td></tr>
  31.     </table>
  32. </body>
  33. </html>

Código CSS: 
Ver original
  1. @charset "utf-8";
  2. /* CSS Document */
  3.  
  4. /*-----------modal--------------*/
  5.  
  6. .modal {
  7.     background:none;
  8.     padding:0.5em;
  9.     text-align:left;
  10. }
  11.  
  12. .modal .boton_cierre {
  13.     float:right;
  14. }
  15.  
  16. .modal .tabla1 {
  17.     clear:both;
  18.     margin-left:4&#37;;
  19.     text-align:left;
  20. }
  21.  
  22. .modal .tabla2 {
  23.     margin-top:3em;
  24.     margin-left:4%;
  25.     text-align:left;
  26. }
  27.  
  28. .modal table caption {
  29.     font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
  30.     font-size:1.2em;
  31.     color:#9ba27c;
  32.     text-align:left;
  33. }
  34.  
  35. .modal table th.ancho1 {
  36.     width:8.8em;
  37. }
  38.  
  39. .modal table th.ancho2 {
  40.     width:34.3em;
  41. }
  42.  
  43. .modal table tr.fondo {
  44.     background:url(pestana_modal.gif) no-repeat;
  45. }
  46.  
  47. .modal table tr.cierre {
  48.     background:url(pestana_modal_inf.gif) no-repeat;
  49.     font-size:0.6em;
  50. }
  51.  
  52. .modal table tr.cierre td {
  53.     padding:0;
  54. }
  55.  
  56. .modal table td {
  57.     font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
  58.     font-size:0.7em;
  59.     padding:0.5em 1em 0 2em;
  60.     color:#1d1d1d;
  61. }
  62.  
  63. .modal table td a {
  64.     color:#1d1d1d;
  65. }
  66.  
  67. .modal table td.titulo {
  68.     font-weight:bold;
  69.     color:#fff;
  70. }

La imagen de fondo que está en la clase "fondo": http://i51.tinypic.com/1dy24x.gif
Y la imagen de fondo que está en la clase "cierre": http://i56.tinypic.com/2eat4wj.gif

Por favor, ¿me pueden ayudar? Podéis probar el código tanto en Firefox como en IE7 (en IE8 me funciona perfectamente)

Muchas gracias por adelantado.

Un saludo.