[HTML] Images en fond de cellules sur IE

Version imprimable

Bonjour,

Je crée en php une fonction pour générer dynamiquement un tableau. Ceci afin d'harmoniser tous les tableaux de mon site et de me permettre une maintenance uniquement sur la feuille de style ou sur cette fonction.
Le problème n'est pas vraiment là, mais c'est le background.

J'affecte une valeur fixe à mon tableau afin de pouvoir mettre une image de fond pour styliser la ligne.
J'affecte donc une classe en HTML et dans la feuille de style, l'image de fond.
Or cette image est répétée sous IE dans chaque cellule alors que sous Firefox elle prend bien toute la place de la ligne (ceci etant le but recherché). Je voulais savoir si c'etait un probleme inéluctable ou si j'ai oublié de faire quelque chose.

Voici les bout de codes correspondants :

Le HTML (je ne mets que le résultat de ma fonction).
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <table cellspacing="0" align=center> <tr> <th colspan="3" class="htTab">Les résultats de la journée</th> </tr> <tr class="RedTitle"> <th colspan="3">Ligue 1 - Journée n° 1 <img src="images/BubbleRed.png" width="20" height="20" alt="Red"/> </th> </tr> <tr class="GreenTitle"> <th>Nom du buteur</th> <th>Equipe qui ouvre le score</th> <th>Equipe qui mène à la mi-temps</th> </tr> <tr class="CorpsTabB"> <td colspan="3">BORDEAUX <strong>2 - 1</strong> CAEN</td> </tr> <tr class="CorpsTabA"> <td>[BOR] (MIL) Gourcuff Yoann</td> <td>BORDEAUX</td> <td>BORDEAUX</td> </tr> <tr> <th colspan="3" class="basTab"> </th> </tr> </table>
Le morceau de la feuille de style
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 .htTab { background: url(images/htTab.gif) no-repeat bottom; width: 800px; height: 50px; border-collapse:collapse; } .basTab { background: url(images/basTab.gif) no-repeat top; width: 800px; height: 50px; border-collapse:collapse; } .RedTitle { background: url(images/RedTitle.gif) repeat-y bottom; width: 800px; height: 30px; border-collapse:collapse; } .GreenTitle { background: url(images/GreenTitle.gif) no-repeat bottom; width: 800px; height: 30px; border-collapse:collapse; } .CorpsTabA { background: url(images/CorpsTabA.gif) no-repeat bottom; width: 800px; height: 30px; border-collapse:collapse; } .CorpsTabB { background: url(images/CorpsTabB.gif) no-repeat bottom; width: 800px; height: 30px; border-collapse:collapse; }
Le résultat en image :

Sous IE :
http://img300.imageshack.us/img300/3734/sousieui6.png

Sous Firefox (résultat recherché) :

http://img154.imageshack.us/img154/7...firefoxai8.png

Je vous remercie d'avance d'avoir lu ce post et je remercie d'avance les personnes qui m'apporteront des réponses constructives.

15/07/2008, 17h39
copin

Salut,

Tous les attributs HTML et XHTML définis dans la balise HTML et XHTML <TR> s'appliquent aux balises Html <TD> qu'elle contient.

Pourquoi ne places tu pas un tableau dans le tableau? Et tu appliques le background/style sur la balise <table> c'est pas super propre mais tu as le rendu souhaité.
15/07/2008, 17h45
copin

Ou sinon plus propre, tu découpes l'image de fond en trois parties.

image 1; Arrondi gauche
image 2; rectangle vert
image 3; arrondi droit

Tu réalises 3 styles avec chacun une image en background que tu appliques chaque style sur la cellule qui va bien.

Merci copin de ta réponse.

La deuxieme solution ne sera pas jouable. En fait mon tableau et son style sont gérés dynamiquement par une fonction.
En gros j'envoie le contenu (un array avec une entete pour identifier le type de ligne, et le contenu des cellules) et le nombre de colonnes à ma fonction et il me génère ce tableau. Donc je ne peux decouper mon image puisque je ne sais pas à l'avance combien j'aurais de colonnes.

Je vais me pencher sur la premiere solution (la moins propre) et voir où cela me mène. Si je n'ai pas bien compris ta deuxieme option, je t'en serais reconnaissant de detailler ton point de vue. En tout cas, merci.

Cependant, s'il y a d'autres solutions qui me permettent de resoudre ce probleme, je suis preneur.

Pour les curieux, ma fonction agit comme ca (etant hors sujet, si ca pollue, dites le moi j'editerai le post) :

D'abord par le biais de plusieurs requetes, je remplis un tableau $tab qui aura cette tete en fin de traitement :

Code:

1
2
3
4
5
$tab = array ('entete' => 'Mon titre de haut de tableau',
              'RedTitle' =>'Mon complément au titre',
              'GreenTitle(i)' => array('Titre de la section')
              'CorpsTab(i) => Array('A1','A2','A3')
              'CorpsTab(i) => Array('B1','B2','B3'))

J'appelle ma fontion tablo($tab,3), où 3 est le nombre de colonnes de mon tableau.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
function tablo($tab,$nbRow)
    {
        $parite=1;
        // Description du tableau
        echo '<table cellspacing="0" align=center>';
 
        // On génère le titre du tableau. i.e. la premiere ligne avec image de fond plus les autres.
 
        while(list($cle,$val) = each($tab))
        {
            if (substr($cle, 0, 6) == 'entete')
            {
                echo '<tr>';
                echo '<th colspan="'.$nbRow.'" class="htTab">'.$val.'</th>';
                echo '</tr>';
            }
 
            if (substr($cle, 0, 8) == 'RedTitle')
            {
            //  echo '<tr bgcolor=#990000>
                echo '<tr class="RedTitle">';
                echo '<th colspan="'.$nbRow.'">'.$val.'</th>';
                echo '</tr>';
            }
 
            if (substr($cle, 0, 10) == 'GreenTitle')
            {
                $nbrSousColonnes = count($val);
                echo '<tr class="GreenTitle">';
                while(list($cle2,$column) = each($val))
                {
                    if ($nbRow == $nbrSousColonnes)
                    {
                        echo '<th>'.$column.'</th>';
                    }else
                    {
                        echo '<td colspan="'.$nbRow.'">'.$column.'</td>';
                    }
                }
                echo '</tr>';
            }
 
            if (substr($cle, 0, 8) == 'CorpsTab')
            {
                $parite *= -1;
                $nbrSousColonnes = count($val);
                if ($parite == 1)
                {
                    $color = '66ff66';
                    $class = 'CorpsTabA';
                } else
                {
                    $color = '33ff33';
                    $class = 'CorpsTabB';
                };
             // echo '<tr bgcolor=#'.$color.'>';
                echo '<tr class="'.$class.'">';
                while(list($cle3,$column2) = each($val))
                {
                    if ($nbRow == $nbrSousColonnes)
                    {
                        echo '<td>'.$column2.'</td>';
                    } else
                    {
                        echo '<td colspan="'.$nbRow.'">'.$column2.'</td>';
                    }
                }
                echo '</tr>';
            }
 
            if (substr($cle, 0, 8) == 'Intercal')
            {
                echo '<tr class="Intercal">';
                echo '<td colspan="'.$nbRow.'"><strong>'.$val.'</strong></td>';
                echo '</tr>';
            }
        }
        echo '<tr>';
        echo '<th colspan="'.$nbRow.'" class="basTab"> </th>';
        echo '</tr>';
        echo '</table>';
 
    }

Code:

1 2 La deuxieme solution ne sera pas jouable. En fait mon tableau et son style sont gérés dynamiquement par une fonction. En gros j'envoie le contenu (un array avec une entete pour identifier le type de ligne, et le contenu des cellules) et le nombre de colonnes à ma fonction et il me génère ce tableau. Donc je ne peux decouper mon image puisque je ne sais pas à l'avance combien j'aurais de colonnes.
Juste si ! Comme tu l'écrit tu connais le nombre de colonnes donc tu peux adapter
1 colonne : une sule image de fond
2 colonnes : une image pour la gauche et une pour la droite
3 colonnes : une à gauche, 1 au centre, une à droite
4 colonnes : une à gauche, 2 au centre, une à droite
5 colonnes : ....

Vu que ton image de centre n'a pas d'arrondit tu peux l'utiliser autant de fois que tu veux sans que cela n'est d'inpact.

16/07/2008, 08h34
copin
Illustration pour la seconde solution.
Ca s'est ton image de base:
Code:

1 2 3 ____________________ (____________________)
tu la coupe comme ca
Coté gauche
Code:

1 2 3 __ (__
Coté droit
Code:

1 2 3 __ __)
Partie centrale
Code:

1 2 3 ___ ___
Ton nombre de case au centre est de N nombre de case totale -2 pour les 2 extremes

Pour l'image centrale tu prends une image de 2px de largeur et tu met un repeat-x pour qu'elle prenne toute la largeur de ta cellule.
16/07/2008, 11h02
HiRoN

Citation:

Envoyé par copin

Ou sinon plus propre, tu découpes l'image de fond en trois parties.

image 1; Arrondi gauche
image 2; rectangle vert
image 3; arrondi droit

Tu réalises 3 styles avec chacun une image en background que tu appliques chaque style sur la cellule qui va bien.

+1, 3 class CSS et c'est reglé ;)
16/07/2008, 14h03
kgb93

Merci pour vos réponses à tous. Effectivement, cette solution meme si elle est plus lourde pourrait compenser les défauts d'internet explorer (sont chiants à ne pas être à la page eux!).
Cela dit, maintenant c'est un soucis en hauteur que j'ai. En effet mon image n'est pas extensible en hauteur et cela me pose des problemes.
Mais j'ai maintenant de très bonnes pistes pour continuer. Je considere donc ce post comme solutionné.

Merci à tous de votre coopération. Il est certain que je reviendrai exposer mes problemes à l'avenir (le site est encore loin d'etre fini).
16/07/2008, 14h05
HiRoN

Passe alors le post en résolu... ;)