plugin Tablesorter. Sous IE8, vilain décalage des images de fond « flèches »

**Mohicane** · 15/06/2010, 12h53

Bonjour,

Je travaille sur un site web professionnel et nous utilisons différents plugins JQuery, notamment Tablesorter.

J'ai actuellement un petit problème d'affichage que je ne rencontre que sous IE8 (Test effectué sur FF3, IE6 et IE8). L'image utilisée en tant que background pour les flèches indiquant le tri croissant ou décroissant ce décale vilainement sur la gauche, laissant apparaitre un trou dans mon tableau. J'ai joint une petite image pour vous montrer de quoi je parle.

Après pas mal de temps passer à débusquer ce qui serait responsable de ce décalage, j'ai enfin trouvé qu'il s'agissait de la mention du doctype dans la page:

Code :

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Quelqu'un aurait-il déjà rencontré ce problème et saurait y remédier?

**danielhagnoul** · 15/06/2010, 23h32

Bonsoir.

Je vous suggère d'essayer avec :

Code :

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

<!doctype html>

Qui est le nouveau format préconisé par HTML5, mais qui est normalement accepté par tous les navigateurs, même IE6.

**Mohicane** · 16/06/2010, 09h51

Merci pour l'info. Malheureusement ca ne change pas le problème ...

**Mohicane** · 21/06/2010, 09h32

Bon et bien pour l'instant j'en suis toujours à devoir retirer la mention du doctype pour que l'espace blanc n'apparaisse pas.

Cependant si j'ai bien tout compris, c'est la largeur du <th> qui change ...?! je dit ça car j'ai vu firebug-lite "highliter" le <th> s'en l'espace blanc.

Personne n'a eu de nouvelles informations?

**danielhagnoul** · 21/06/2010, 13h24

Bonjour.

Cette histoire de doctype me semble anormale, je pense qu'il y a une ou plusieurs erreurs dans votre code.

**Mohicane** · 21/06/2010, 14h47

Voici un exemple dans lequel, si vous jouez avec le tri dans IE8, vous verrez apparaitre ce petit décalage (il faut parfois trier plusieurs fois sur différentes colonnes pour reproduire le bug).

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
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
 
<!doctype html>
<html>
	<head>
		<title>Exemple Tablesorter</title>
 
		<script type="text/javascript" src="scripts/jquery-1.4.1.min.js"></script>
		<script type="text/javascript" src="scripts/jquery.tablesorter.js"></script>
 
		<script type="text/javascript">
			$(document).ready(function () {
				// ajout du tri sur les tableaux
				$("table").tablesorter({
					headers: {
						0: { sorter: false }
					},
					cssAsc: "headerSortAsc",
					cssDesc: "headerSortDesc",
					widgets: ['zebra']
				});
			});
		</script>
 
		<style type="text/css">
			table {
				width: 100%;
 
				table-layout:fixed;
			}
 
			th, td {
				vertical-align: middle;
				text-align: left;
 
				font-size: 11px;
				padding: 2px 5px;
 
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}
 
			 th {
				background-color: #896aae;
 
				font-weight: bold;
				color: white;
			}
 
			td .submit-link {
				width: 100%;
				text-align: left;
				background: transparent;
				color: #874696;
				font-size: 11px;
 
				cursor: pointer;
 
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}
 
			.header {
				background-color: orange;
				background-image: url('images/fleche-tri.gif');
				background-repeat: no-repeat; 
				background-position: center right;
				cursor: pointer;
			}
 
			.even {
				background-color: pink;
				border: 1px solid yellow;
			}
 
			.odd {
				background-color: yellow;
				border: 1px solid pink;
			}
 
			.headerSortDesc {
				background-image: url('images/fleche-haut.gif');
			}
 
			.headerSortAsc {
				background-image: url('images/fleche-bas.gif');
			}
		</style>
 
	</head>
	<body>
 
		<table>
			<thead>
				<tr>
					<th class="header" style="width: 3%;">
						<input type="checkbox"/>
					</th>
					<th class="header" style="width: 27%;">Nom du fichier</th>
					<th class="header" style="width: 15%;">Date de cr&eacute;ation</th>
					<th class="header" style="width: 15%;">Signataire</th>
					<th class="header" style="width: 15%;">Etat</th>
					<th class="header" style="width: 25%;">Commentaire</th>
				</tr>
			</thead>
			<tbody>
				<tr class="tr even">
					<td>
						<input type="checkbox" value="true"/>
					</td>
					<td>Un doc.txt</td>
					<td>05/06/2010</td>
					<td>Raul Paz</td>
					<td>Valid&eacute;</td>
					<td></td>
				</tr>
				<tr class="tr odd">
					<td>
						<input type="checkbox" value="true"/>
					</td>
					<td>Un deuxieme doc.txt</td>
					<td>08/06/2010</td>
					<td>Mohicane De Beauvent</td>
					<td>Pr&eacute;par&eacute;</td>
					<td>Un commentaire</td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td colspan="6">
						<div class="submit-container">
							<input type="submit" value="Valider" class="submit" />
							<input type="submit" value="T&#xE9;l&#xE9;charger" class="submit" />
						</div>
					</td>
				</tr>
			</tfoot>
		</table>
 
	</body>
</html>

Retirer maintenant le doctype et vous verrez que ca ne se reproduira plus.

plugin Tablesorter. Sous IE8, vilain décalage des images de fond « flèches »

jQuery

Vue hybride

Discussions similaires

Partager

Partager