3 pièce(s) jointe(s)
subtilité CSS Firefox/IE/Opera
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:
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 alors vous obtenez aussi le décalage dans Firefox.
Est-ce que quelqu'un aurait une solution ou bien une piste, des suggestions ?
Cordialement
