Problema con el fondo de una tr en IE7

Timak · #1 (**permalink**) 06/09/2010, 12:24

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Modal</title>
</head>
 
<body class="modal">
    <table class="tabla1" summary="Tabla" cellspacing="0">
        <caption>PROBANDO</caption>
        <tr>
            <th scope="col" class="ancho1"></th>
            <th scope="col" class="ancho2"></th>
        </tr>
        <tr class="fondo">
            <td class="titulo">Probando:</td>
            <td>Resultado</td>
        </tr>
        <tr class="cierre"><td colspan="2">&nbsp;</td></tr>
        <tr class="fondo">
            <td class="titulo">Probando:</td>
            <td>8:00 a 15:00</td>
        </tr>
        <tr class="cierre"><td colspan="2">&nbsp;</td></tr>
        <tr class="fondo">
            <td class="titulo">Mas largo:</td>
            <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>
        </tr>
        <tr class="cierre"><td colspan="2">&nbsp;</td></tr>
    </table>
</body>
</html>

Código CSS:

Ver original@charset "utf-8";
/* CSS Document */
 
/*-----------modal--------------*/
 
.modal {
    background:none;
    padding:0.5em;
    text-align:left;
}
 
.modal .boton_cierre {
    float:right;
}
 
.modal .tabla1 {
    clear:both;
    margin-left:4&#37;;
    text-align:left;
}
 
.modal .tabla2 {
    margin-top:3em;
    margin-left:4%;
    text-align:left;
}
 
.modal table caption {
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:1.2em;
    color:#9ba27c;
    text-align:left;
}
 
.modal table th.ancho1 {
    width:8.8em;
}
 
.modal table th.ancho2 {
    width:34.3em;
}
 
.modal table tr.fondo {
    background:url(pestana_modal.gif) no-repeat;
}
 
.modal table tr.cierre {
    background:url(pestana_modal_inf.gif) no-repeat;
    font-size:0.6em;
}
 
.modal table tr.cierre td {
    padding:0;
}
 
.modal table td {
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size:0.7em;
    padding:0.5em 1em 0 2em;
    color:#1d1d1d;
}
 
.modal table td a {
    color:#1d1d1d;
}
 
.modal table td.titulo {
    font-weight:bold;
    color:#fff;
}

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.

Shaito · #2 (**permalink**) 09/09/2010, 18:16

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

jomaruro · #3 (**permalink**) 11/09/2010, 02:19

Hola:

Cita:

Iniciado por Shaito

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.