cadre extensible avec image

Version imprimable

Bonjour

mon probleme avec le code qui suit est qu'à l'affichage, j'ai un espace de 10px entre le 1er et le 2eme <tr>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<table border="0" width="100%" cellspacing="0" cellpadding="0">
    <tr>
        <td style="background-image:url(images/arrondi_haut_gauche.png); background-repeat:no-repeat">&nbsp;</td>
        <td style="background-image:url(images/haut_gris.png); background-repeat:repeat-x">&nbsp;</td>
        <td style="background-image:url(images/arrondi_haut_droite.png); background-repeat:no-repeat">&nbsp;</td>
    </tr>
    <tr>
        <td width="6px" style="background-image:url(images/gauche_gris.png); background-repeat:repeat;">&nbsp;</td>
        <td>&nbsp;</td>
        <td width="6px" style="background-image:url(images/droite_gris.png); background-repeat:repeat">&nbsp;</td>
    </tr>
    <tr>
        <td style="background-image:url(images/arrondi_bas_gauche.png); background-repeat:no-repeat">&nbsp;</td>
        <td style="background-image:url(images/bas_gris.png); background-repeat:repeat-x">&nbsp;</td>
        <td style="background-image:url(images/arrondi_bas_droite.png); background-repeat:no-repeat">&nbsp;</td>
    </tr>
</table>

merci de votre aide

18/02/2009, 19h46
Erwan31

Bonsoir, ce n'est très probablement pas un espace entre les tr mais un background mal placé.
Une page en ligne faciliterait les chose (puisque ça vient peut-être d'une image), en l'état il est impossible de te dire d'où vient ce décalage.

je ne pense pas car en remplacant le 1er <tr>

Code:

1
2
3
4
5
6
 
    <tr>
        <td style="background-image:url(images/arrondi_haut_gauche.png); background-repeat:no-repeat">&nbsp;</td>
        <td style="background-image:url(images/haut_gris.png); background-repeat:repeat-x">&nbsp;</td>
        <td style="background-image:url(images/arrondi_haut_droite.png); background-repeat:no-repeat">&nbsp;</td>
    </tr>

par

Code:

<tr><td colspan="3"></td></tr>

j'ai toujours 12px de height en trop sur ce <tr>

ps : les images font 6px x 6px

resolu :

avec le code suivant :
test ie7 et ff ok

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
        <tr>
            <td width="6px" height="6px" style="background-image:url(images/arrondi_haut_gauche.png); background-repeat:no-repeat; background-position:bottom;"></td>
            <td width="100%" style="background-image:url(images/haut_gris.png);background-repeat:repeat-x; background-position:bottom;"></td>
            <td width="6px" height="6px"  style="background-image:url(images/arrondi_haut_droite.png); background-repeat:no-repeat; background-position:bottom;"></td>
        </tr>
        <tr>
            <td style="background-image:url(images/gauche_gris.png); background-repeat:repeat-y">&nbsp;</td>
            <td>&nbsp;</td>
            <td width="6px" style="background-image:url(images/droite_gris.png); background-repeat:repeat-y">&nbsp;</td>
        </tr>
        <tr>
            <td style="background-image:url(images/arrondi_bas_gauche.png); background-repeat:no-repeat">&nbsp;</td>
            <td style="background-image:url(images/bas_gris.png); background-repeat:repeat-x">&nbsp;</td>
            <td style="background-image:url(images/arrondi_bas_droite.png); background-repeat:no-repeat">&nbsp;</td>
        </tr>