Foros del Web » Creando para Internet » CSS »

Problema con el fondo de una tr en IE7

Estas en el tema de Problema con el fondo de una tr en IE7 en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 06/09/2010, 13:24
 
Fecha de Ingreso: marzo-2009
Mensajes: 18
Antigüedad: 8 años, 8 meses
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. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <link rel="stylesheet" type="text/css" href="style.css" />
  5. <title>Modal</title>
  6. </head>
  7.  
  8. <body class="modal">
  9.     <table class="tabla1" summary="Tabla" cellspacing="0">
  10.         <caption>PROBANDO</caption>
  11.         <tr>
  12.             <th scope="col" class="ancho1"></th>
  13.             <th scope="col" class="ancho2"></th>
  14.         </tr>
  15.         <tr class="fondo">
  16.             <td class="titulo">Probando:</td>
  17.             <td>Resultado</td>
  18.         </tr>
  19.         <tr class="cierre"><td colspan="2">&nbsp;</td></tr>
  20.         <tr class="fondo">
  21.             <td class="titulo">Probando:</td>
  22.             <td>8:00 a 15:00</td>
  23.         </tr>
  24.         <tr class="cierre"><td colspan="2">&nbsp;</td></tr>
  25.         <tr class="fondo">
  26.             <td class="titulo">Mas largo:</td>
  27.             <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>
  28.         </tr>
  29.         <tr class="cierre"><td colspan="2">&nbsp;</td></tr>
  30.     </table>
  31. </body>
  32. </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.
  #2 (permalink)  
Antiguo 09/09/2010, 19:16
Avatar de Shaito  
Fecha de Ingreso: agosto-2010
Mensajes: 383
Antigüedad: 7 años, 4 meses
Puntos: 37
Respuesta: Problema con el fondo de una tr en IE7

Hola!

No se porqué te complicas la vida!

La cosa está más simple de lo que parece, mira sería una cosa así:




Si necesitas más ayuda para crear el code en HTML y CSS avisame por MensajePrivado

Un Saludo
  #3 (permalink)  
Antiguo 11/09/2010, 03:19
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Problema con el fondo de una tr en IE7

Hola:

Cita:
Iniciado por Shaito Ver Mensaje
Si necesitas más ayuda para crear el code en HTML y CSS avisame por MensajePrivado
El foro es público con lo cual no veo correcto resolver las dudas en privado. Así todos aprendemos.

Saludos.


Etiquetas: fondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 06:39.