Différence de rendu d'un tableau en CSS sous IE et Firefox

Version imprimable

1 pièce(s) jointe(s)

Bonjour,

je souhaites créer un cadre arrondi autour d'un texte.
Pour cela j'utilise un tableau (je ne vois pas comment faire autrement).
J'ai donc le code suivant :

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
<html>
  <head>
    <title>Test</title>
	<style>
	    .tableauAvertissement
        {	        
	        border-spacing: 0px;
			border-collapse: collapse;
        }
		.tableauAvertissementCoin
		{
		    height: 5px;
			width: 5px;
			padding: 0px;
			margin: 0px;
		}
		.img-bodure
		{
		    border: 0px;
		}
        .tableauAvertissementVertical
        {		   
		    background-image: url(img/bordure-verticale.gif);
			background-repeat: repeat;
			width: 5px;			
			padding: 0px;
        }     
        .tableauAvertissementFond 
        {
		    background-color: #E5000E;
			font-size:20;
        }   		
	</style>
  </head>
  <body> 
     <table class="tableauAvertissement">
	   <tr>
	     <td class="tableauAvertissementCoin"><img src="img/coin-gauche-haut.gif" alt="coin" class="img-bodure" /></td>
		 <td rowspan="3" class="fond">dddd</td>
		 <td class="tableauAvertissementCoin"><img src="img/coin-droit-haut.gif" alt="coin" class="img-bodure" /></td>
	   </tr>
	   <tr>
	     <td class="tableauAvertissementVertical"><img src="img/bordure-verticale.gif" alt="bodure" class="img-bodure" /></td>
	     <td class="tableauAvertissementVertical"><img src="img/bordure-verticale.gif" alt="bodure" class="img-bodure" /></td>		 
	   </tr>
	   <tr>
	     <td class="tableauAvertissementCoin"><img src="img/coin-gauche-bas.gif" alt="coin" class="img-bodure" /></td>
		 <td class="tableauAvertissementCoin"><img src="img/coin-droit-bas.gif" alt="coin" class="img-bodure" /></td>
	   </tr>	   
	 </table>	 
  </body>
</html>

Sous firefox impeccable mais pas sous IE (voir résultat en pièce jointe).

Je suis pas un expert CSS quelqu'un a-t-il un idée ?

Merci

19/06/2008, 14h32
Er3van

Je ne peux pas tester à cause d'absence d'images, mais ne serait-ce pas simplement du à l'abscence de height ? (Peut-être forcé à height:0px sur un parent)
Le repeat ne s'applique pas en hauteur si celle-ci n'est pas défini.
A minimat mettre height:auto;, mais en théorie c'est la valeur par défaut, donc ça peut ne pas venir de là.

Sinon, abscence de Doctype. Tu passes en mode Quirk sous IE et du coup les padding sont à l'extérieur des boites, idem pour les bordures.
19/06/2008, 14h39
bubulemaster

C'est malheureusment pareil.
La solution serait sinon d'avoir une image de fond qui s'adapte à la taille d'un div.

En fait, vu ton cadre, tu n'as besoin que de trois lignes, et deux images.

Ca donnerait :

Code:

1
2
3
4
5
6
 
<table>
<tr><td><img src="..." alt="image du haut" /></td></tr>
<tr><td style="background-color:#FF0000;">Le nom de mon bouton</td></tr>
<tr><td><img src="..." alt="image du bas" /></td></tr>
</table>

19/06/2008, 16h17
desert

Pourquoi utiliser un tableau ?

Ce que tu recherches à faire est expliqué dans les cours et tutoriels pour apprendre CSS et la FAQ CSS. C'est fait avec des divs.
19/06/2008, 21h12
bubulemaster

c'est exactement ce que je cherche meric