Ni min-weight, ni expression CSS ne fixe ma colonne (sous IE bien sûr)

**_jey_** · 22/07/2009, 17h51

Bonjour !

J'ai un peu de mal sur le CSS pour la disposition des éléments... mais alors quand IE ne collabore pas, c'est un cauchemar !

Voilà mon soucis :
J'ai un tableau pourvu de deux colonnes (une à gauche, et une à droite) qui changent de largeur en fonction de la largeur de la page, ce qui permet d'avoir le contenu (colonne du milieu) du tableau toujours au centre.
Seulement, cette colonne change de taille aussi, alors qu'elle ne devrait pas !

Autre chose importante : deux autres colonnes (située à gauche et à droite entre les colonnes variables et celle du milieu) ne doivent pas changer de taille, puisqu'elle sont destinées à contenir un joli cadre pour mon tableau.

J'espère avoir été clair.

Voici mon 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
<!DOCTYPE html PUBLIC "-//W3C//Dtd XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/Dtd/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//Dtd XHTML 1.0 Transitionnal//EN" "http://www.w3.org/tr/xhtml1/Dtd/xhtml1-transitionnal.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 
	<meta http-equiv="Content-Type" content="text/html charset=utf-8">
 
	<title>Page</title>
 
	<style type="text/css">
 
table, tr, th, td
{
	border:1px solid black;
}
 
 
table#global
{
	width:100%;
	border-collapse:collapse;
}
 
table#global td.col_flottante
{
	width:10%;
}
 
table#global td#bord_g, td#bord_d
{
	min-width:16px;
	width:16px;
}
 
*+html table#global td#bord_g, td#bord_d
{
	width: expression( document.body.clientWidth < 1000? "16px": "16px" );	
}
 
table#global td#bord_h, td#bord_b
{
	height:16px;
}
 
#entete
{
	min-width:830px;
	width:830px;
}
 
*+html #entete
{	/* si ici je met "830px" et "830px", les bordures changent de largeur selon la largeur de la fenêtre
		et ça, je ne comprend pas vraiment pourquoi !
		quoi qu'il en soit, la colonne du milieu change toujours de largeur !	*/
	width: expression( document.body.clientWidth < 1000? "auto": "830px" );
}
 
	</style>
 
</head>
 
<body>
 
<table id="global">
 
	<tr><td rowspan="6" class="col_flottante"></td>
		<td id="coin_hg"></td>
		<td id="bord_h"></td>
		<td id="coin_hd"></td>
		<td rowspan="6" class="col_flottante"></td>
	</tr>
 
	<tr><td rowspan="4" id="bord_g"></td>
		<td id="entete">
			<div>HEADER</div>
		</td>
		<td rowspan="4" id="bord_d"></td>
	</tr>
 
	<tr><td>
		<div> contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu</div>
	</td></tr>
	<tr><td>
		<div> contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu</div>
	</td></tr>
	<tr><td>
		<div> contenu contenu contenu contenu contenu contenu contenu contenu contenu contenu</div>
	</td></tr>
 
	<tr><td id="coin_bg"></td>
		<td id="bord_b"></td>
		<td id="coin_bd"></td>
	</tr>
 
</table>
 
</body>
</html>

Merci d'avance pour votre aide précieuse !!

**Bisûnûrs** · 22/07/2009, 18h10

min-weight ? Connais pas.

Au passage, tu as deux DOCTYPE, je pense que tu peux en enlever un. Et puis ça serait bien de préciser la version de IE qui te pose problème, il y en a 3 actuellement sur le marché.

**_jey_** · 23/07/2009, 09h23

Je ne m'occupe que d'IE 7... les futurs utilisateurs de mon appli n'ont qu'IE 7 ou FF 3.
Pour ce qui est des DOCTYPEs, je me suis inspiré des conseils du site du W3C.

On va dire que la nuit porte conseil : je m'en suis finalement sorti, tout simplement en ne précisant pas de largeur pour les colonnes "flottantes". Etant chacune à 10% du tableau, c'était normal que ma colonne centrale finisse par s'aggrandir pour qu'ils ne dépassent pas ces 10%...

**Bisûnûrs** · 23/07/2009, 09h34

IE7 comprend très bien le min-width, sous réserve qu'il soit en mode Standard et non en mode Quirks. Utiliser deux DOCTYPE fait passer IE en mode Quirks. Je te laisse déduire de ce que tu dois faire.

D'ailleurs je suis très intéressé de savoir où tu as vu que le W3C recommendait de mettre deux DOCTYPE.

Ni min-weight, ni expression CSS ne fixe ma colonne (sous IE bien sûr)

Tableau en CSS

Vue hybride

Discussions similaires

Partager

Partager