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.

**danielhagnoul** · 21/06/2010, 20h58

Bonsoir.

Version corrigée, voir le commentaire dans le code :

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
<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Exemple Tablesorter</title>
    <style>
        table {
            width: 100%;
            table-layout:fixed;
        }
        th, td {
            vertical-align: middle;
            text-align: left;
            font-size: 11px;
            padding: 2px 5px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis; /* inconnu de Firefox 3.6.3 ! */
        }
         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;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis; /* inconnu de Firefox 3.6.3 ! */
        }
        .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>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-1.4.2.min.js"></script>
    <script charset="utf-8" src="../lib/jquery.tablesorter.min.js"></script>
    <script>
        $(function () {
            // ajout du tri sur les tableaux
            $("table").tablesorter({
                headers: {
                    0: { sorter: false }
                },
                cssAsc: "headerSortAsc",
                cssDesc: "headerSortDesc",
                widgets: ['zebra']
            });
        });
    </script>
</head>
<body>
    <table>
        <thead>
            <tr>
                <!-- conseil : la somme des th peut faire 100% mais avec au moins un th width sur auto ! -->
                <th class="header" style="width: 3%;">
                    <input type="checkbox"/>
                </th>
                <th class="header" style="width: auto;">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>

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

Merci encore une fois pour les conseils ... Mais ca ne marche toujours pas.

Preuve à l'appuie mon dernier screenshot.
Ce bug se produit sur Internet Explorer 8.0.6001.18702IC

**devyan** · 30/06/2010, 11h58

Bonjour,

Je ne reproduis pas ce comportement avec Internet Explorer 8.0.6001.18702

Par contre, je n'ai pas les images de la feuille CSS

devyan

**Mohicane** · 30/06/2010, 12h29

Et bien les voilà ...

Mais ... non .... j'y ai pensé également ... mais ca ne vient pas des flèches ... hein?

**devyan** · 30/06/2010, 14h32

Envoyé par Mohicane

Et bien les voilà ...

Mais ... non .... j'y ai pensé également ... mais ca ne vient pas des flèches ... hein?

Vu que ce sont des images de fond (background) la seule raison qui pourrai faire que cela vient des images serait que certaines contiennent un fond blanc sur la droite

Code comme ceci :

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

1
2
3
4
5
            xxxxxx
xxxxx       xxxxxx
 xxx        xxxxxx
  x         xxxxxx
            xxxxxx

Non reproduit (même avec les images)

**Mohicane** · 30/06/2010, 14h58

Dans le doute j'ai vérifié, mais il n'y a pas de blanc sur la droite.

Ce bug ne se produit sur ma machine que lorsque j'utilise le 'doctype' susdit ... et avec un petit coup de baguette de firebug lite j'ai pu constater qu'apparemment, il s'agissait de la réduction de la largeur du th (si si je vous jure ...)

Voici un petit screenshot de ce que j'obtiens en mode firebug lite.

**devyan** · 30/06/2010, 15h07

Envoyé par Mohicane

Dans le doute j'ai vérifié, mais il n'y a pas de blanc sur la droite.

Ce bug ne se produit sur ma machine que lorsque j'utilise le 'doctype' susdit ... et avec un petit coup de baguette de firebug lite j'ai pu constater qu'apparemment, il s'agissait de la réduction de la largeur du th (si si je vous jure ...)

Voici un petit screenshot de ce que j'obtiens en mode firebug lite.

En même temps, il y a le terme "loose" dans cette DTD ...

devyan

P.S. : même avec cette DTD, je n'ai pas le pb.

**Mohicane** · 30/06/2010, 15h54

Bon et bien je suis en train de faire passer le mot dans ma boite et je donne 20€ au premier collègue qui sera capable de reproduire le bug sous mes yeux!

Gab

**danielhagnoul** · 30/06/2010, 23h48

Bonsoir.

Après avoir téléchargé vos images et après avoir réalisé quelques tests, je n'ai pas pu reproduire le décalage mais je constate plusieurs problèmes de mise en page.

Le mieux que je puisse faire, c'est de vous proposé, une feuille de style qui fonctionne. Voir les commentaires dans le code.

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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <title>Exemple Tablesorter</title>
    <style>
        table.tablesorter {
            width:95%;
            margin:12px auto;
            /* table-layout = problèmes */
            empty-cells:show;
            border-collapse:collapse;
            border-spacing:0px;
            border-width:1px;
            border-style:solid;
            border-color:#666666;
            background-color:#CDCDCD;
            color:#000000;
            font-size:0.9em;
            font-style:normal;
            font-weight:normal;
            line-height:normal;
            letter-spacing:normal;
        }
        table.tablesorter caption {
            caption-side:top;
            padding-top:6px;
            padding-bottom:6px;
            text-align:center;
            font-size:1.2em;
            font-style:oblique;
            font-weight:bold;
            line-height:normal;
            letter-spacing:0.2em;
            color:#000000;
        }
        table.tablesorter thead tr th {
            border-width:1px;
            border-style:solid;
            border-color:#999999;
            background-color: #e6eeee;
            color:#000000;
            padding:6px;
            text-align:center;
            font-size:0.9em;
            font-style:normal;
            font-weight:bold;
            line-height:1.8em;
            letter-spacing:normal;
        }
        table.tablesorter tfoot tr th {
            border-width:1px;
            border-style:solid;
            border-color:#999999;
            background-color: #e6eeee;
            color:#000000;
            padding:6px;
            text-align:left;
            font-size:0.9em;
            font-style:italic;
            font-weight:normal;
            line-height:1.8em;
            letter-spacing:normal;
        }
        table.tablesorter thead tr .header {
            background-image:url(../images/bg.gif);
            background-repeat: no-repeat;
            background-position:right;
            cursor: pointer;
        }
        table.tablesorter tbody td {
            border-width:1px;
            border-style:solid;
            border-color:#999999;
            background-color:#FFFFFF;
            color:#000000;
            vertical-align:middle;
            padding:6px;
            text-align:left;
            font-size:0.9em;
            font-style:normal;
            font-weight:normal;
            line-height:1.2em;
            letter-spacing:normal;
        }
        table.tablesorter tbody tr.odd td {
            background-color:#FDFFD9;
        }
        table.tablesorter thead tr .headerSortUp {
            background-image: url(../images/asc.gif);
        }
        table.tablesorter thead tr .headerSortDown {
            background-image: url(../images/desc.gif);
        }
        table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
            background-color: #8dbdd8;
        }
 
        /* si on remplace les flèches par défaut fleche-tri, haut et bas la mise en page est perturbée  ! */
    </style>
	<script charset="utf-8" src="../lib/jqueryui/js/jquery-1.4.2.min.js"></script>
    <script charset="utf-8" src="../lib/jquery.tablesorter.min.js"></script>
    <script>
        $(function () {
            $(".tablesorter").tablesorter({
				sortList: [[1,0]],
				headers: { 
					0:{sorter: false},
					2:{sorter: false}
				},
                widgets: ['zebra']
            });
        });
    </script>
</head>
<body>
    <table class="tablesorter">
        <thead>
            <tr>
                <!-- conseil : la somme des th peut faire 100% mais avec au moins un th width sur auto ! -->
                <th style="width: 3%;">
                    <!-- la présence du checkbox empêche l'application du sorter false ! -->
                    &nbsp;
                </th>
                <th style="width: auto;">Nom du fichier</th>
                <th style="width: 15%;">Date de cr&eacute;ation</th>
                <th style="width: 15%;">Signataire</th>
                <th style="width: 15%;">Etat</th>
                <th style="width: 25%;">Commentaire</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <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>
                <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>
                        <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>

**Mohicane** · 05/07/2010, 12h21

Merci pour ta proposition. Je vais tester ces modifications sur mon application ... j'ai dû batailler pour arriver à obtenir quelque chose de correct sous FF ET IE avec ce satané tableau. Je crois savoir bien me débrouiller mais je bloque toujours sur des petits détails et je ne connais pas les bonnes pratiques et les choses à éviter (mais ca viendra avec des conseils comme les vôtres)

Par contre je vois qu'il y a une déclaration CSS pour une balise caption, mais celle-ci n'existe pas dans le code. A-t-elle une impact réelle sur la mise en page du tableau ou bien c'est un ajout de votre part au cas ou j'en aurais besoin?

Merci encore. Et pour info, je travaille à mi-temps c'est pour ca que je ne réponds qu'en début de semaine en général.

**Mohicane** · 05/07/2010, 12h49

Bon j'ai fait les tests avec ton code.

Quelques points:
- J'utilise "table-layout: fixed;" en combinaison avec "overflow: hidden;" et "white-space: nowrap;" car c'est le seul moyen que j'ai trouvé pour avoir une largeur de colonne fixe. Le contenu des cellules étant dynamique, si j'ai un nom trop long, il doit disparaitre à la fin de la cellule. Du coup, y a-t-il un autre moyen de gérer cela?
- C'est vrai que j'ai modifier les flèches par défaut ... c'est peut être une voie pour découvrir ce qui cloche dans mon code.
- De mon côté, je n'ai pas eu de problème avec les checkboxs et l'option "sorter false".

Je continue mes recherches et je vous tiens au courant.

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

jQuery

Discussions similaires

Partager

Partager