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

**bubulemaster** · 19/06/2008, 13h56

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Er3van** · 19/06/2008, 14h32

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.

**bubulemaster** · 19/06/2008, 14h39

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

**Er3van** · 19/06/2008, 14h49

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

Ca donnerait :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**desert** · 19/06/2008, 16h17

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.

**bubulemaster** · 19/06/2008, 21h12

c'est exactement ce que je cherche meric

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

Tableau en CSS

Discussions similaires

Partager

Partager