subtilité CSS Firefox/IE/Opera

**michel18** · 10/10/2007, 19h57

Bonjour,

J'ai écrit un script PHP qui me permet d'afficher dans un tableau a 2 colonnes une ligne de texte et un pourcentage.

-----------------------------
bla bla | 27%
-----------------------------
bla bla | 15 %
-----------------------------
etc...

dans la colonne de droite j'affiche une image dimensionné en fonction du %, et par dessus cette image le chiffre correspondant. L'aspect est géré via du CSS.
Or j'obtient un décalage disgracieux dans IE7 et Opera9, et non dans Firefox2.

Voici le code dont les valeurs sont en durs pour éventuellement expérimenter :

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
<html>
<head>
	<style rel="stylesheet" type="text/css">
		.texte_percent {
			height: 0px; 
			width: 100px; 
			top: -16px; 
			left: 8px; 
			margin: 0; 
			position: relative;
			font-size: 11px;
			color: black;
			z-index:1;
		}
		.progress_bar {
			background-image: url("progress.jpg");
			height: 18px;
			z-index: 0;
		}
		.master_table {
			border-spacing: 4px;
			border-style: none; 
			width: 96%; 
		}
		.cell_left {
			background-color: #FF9900; 
			border-style: none;
		}
		.cell_right {
			width: 300px; 
			border-color: gray;
			padding: 1px;
			background-color: #333333;
		}
	</style>
</head>
<body>
	<div>
	<table class='master_table'>
		<tr>
			<td class='cell_left'>ligne texte de référence bla bla bla</td>
			<td class='cell_right'>
				<div class='progress_bar' style='width:150px'></div>
				<p class='texte_percent'>50%</p>
			</td>
		</tr>
	</table>
	</div>
</body>
</html>

Ici il n'y a qu'une ligne mais c'est pour l'exemple. Je tiens absolument a l'utilisation du tableau car les valeurs sont géré dynamiquement avec PHP et il y en beaucoup.
Je joint 3 images, le résultat généré dans Firefox, celui dans IE et l'image de la barre de progression (toujours dans une éventuelle expérimentation).

Ce que je souhaite obtenir est le resultat de Firefox (sans le décalage). A noter que si vous supprimer la ligne

Code :

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