Discussion :

[kaele]

Je souhaite faire un formulaire avec un affichage identique sous IE 6/7 et Firefox. Mais J'ai un problème d'alignement des cellules sous IE lors de l'affichage d'une table en utilisant des balises <div>. J'ai vu que les propriétés display:table-row et display:table-cell ne sont pas prises en compte par IE. J'ai essayé de les remplacer par display:inline mais les champs ne sont plus centrées comme ils le seraient dans une table. Par quoi puis-je remplacer le display pour avoir un affichage semblable à un tableau sans toucher au code html?

Voici le css et le code html que j'utilise:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
div.table { display:table; }
div.tr { display:table-row; }
div.td { display:table-cell; }
 
<div class="table">
<div class="tr">
  <div class="td" title="">libellé :</div>
  <div class="td"><input type="text" name="var_libelle"></div>
</div>
<div class="tr">
  <div class="td" title="">libellé :</div>
  <div class="td"><input type="text" name="var_libelle2"></div>
</div>
</div>

[cssman]

Pour des libellés de formulaire, il faut utiliser un

Code :

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

<label></label>

Ceci pour des raisons de sémantique et d'accessibilité. Et il y a d'autre méthodes bien plus adaptées que d'utiliser table-cell pour aligner des labels et des champs de formulaire. Cherche dans les tutoriels CSS.

[HiRoN]

Bonjour,

Un exemple de construction / mise en forme de formulaire ici

[Macmillenium]

Bonjour,

Je te laisse juger la pertinence de ton choix :

Tout d'abord, attention à ne pas confondre le rendu de l'élément (CSS) et ses imbrications autorisées (HTML).
L'obligation d'avoir la structure TABLE -> TR -> TD ne veut pas forcément dire table -> table-row -> table-cell.

J'ai vu que les propriétés display:table-row et display:table-cell ne sont pas prises
en compte par IE.

Oui, table/table-row/table-cell font partis des valeurs possibles de display que IE7- ne reconnait pas.

J'ai essayé de les remplacer par display:inline mais les champs ne sont
plus centrées comme ils le seraient dans une table. Par quoi puis-je remplacer le display
pour avoir un affichage semblable à un tableau sans toucher au code html?

Il existe quelques solutions alternatives qui dépendent du contexte d'utilisation.
Pour ton cas, je te conseille de garder un seul conteneur pour les éléments table-cell qui sera l'équivalent du TR. table-row ne te sera pas d'une grande utilité.
Ensuite, tu peux attribuer un display:inline et conférer le Layout aux éléments .td pour pouvoir simuler le comportement inline-block :

Code :

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

1
2
3
4
5
6
 
<!--[if lte IE 7]>
    <style type="text/css" media="screen">
        div.td { display:inline; zoom:1 }
    </style>
<![endif]-->

Avantage : Ceci te permet au moins d'aligner tes éléments horizontalement sur la même ligne tout en se comportant comme un block.

Inconvénient : L'alignement vertical des éléments par rapport à la hauteur de leur conteneur nécessite d'autres correctifs qui impliquent une éventuelle modification du code HTML mais tout dépend encore du contexte

[kaele]

Merci pour vos réponses.
Je n'arrive toujours pas à centrer horizontalement les champs de ce type de formulaire sous IE6/IE7/IE8 en ne modifiant que le css.
J'ai vu qu'il existait apparemment une autre méthode pour simuler le table-cell sous IE en utilisant des colonnes factices. En quoi consiste ce principe? Est-ce que cela peux être applicable pour mon cas?

Merci d'avance pour vos réponses.

[cssman]

Bonjour Kaele,

J'avoue ne pas bien comprendre pourquoi du veux absolument garder ce code html en l'état...

Ou tu ne veux pas faire un tableau par souci d'accessibilité et à ce moment là, il faut respecter la sémantique et ne pas plonger dans la "divite" aiguë,

Ou l'accessibilité n'est pas ton souci, et à ce moment là, fais un tableau, un vrai , ce sera plus simple

[Macmillenium]

Je n'arrive toujours pas à centrer horizontalement les champs de ce type de formulaire sous IE6/IE7/IE8 en ne modifiant que le css.

Code xhtml :

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="fr">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>table-cell</title>
	<style type="text/css">
                div.td { 
                        display:table-cell; 
                        width : 250px;
                        border : 1px solid red;
                        padding : 10px;
                        text-align : center;
                }
        </style>
 
	<!--[if lte IE 7]>
		<style type="text/css" media="screen">
		   div.td { 
                      display:inline; 
                      zoom : 1;
                   }
		</style>
	<![endif]-->
</head>
 
<body>
 
 
<div class="tr">
  <div class="td">
	<label for="var_libelle"> libellé :</label> 
  </div>
  <div class="td">
    <input type="text" id="var_libelle" name="var_libelle" />
  </div>
</div>
 
<div class="tr">
  <div class="td">
	<label for="var_libelle2"> libellé :</label> 
  </div>
  <div class="td">
	<input type="text" id="var_libelle2" name="var_libelle2" />
</div>
</div>
 
</body>
 
</html>

Sois plus précis dans tes demandes stp.

sous IE en utilisant des colonnes factices. En quoi consiste ce principe? Est-ce que cela peux être applicable pour mon cas?

C'est une technique de trompe l'oeil qu'on utilise afin de simuler le rendu des colonnes de même hauteur.

[CCyrillus]

Bonjour,

display:inline-block; sur un element inline ne pose pas de veritable soucis dans IE6/7/8 .

En partant d'un formulaire simple , tu devrais pouvoir obtenir l'effet recherché.
je ne sait pas trop quelle resultat final tu recherche , je ne te propose donc que ce qui touche le centrage de ton libellè :
2 pistes : inline-block (applicable a des label) et float pour tout type de balises.
table-cell est pour ff2 en alternative a inline-block (optionnel);

Pour habiller tes fonds , réfère toi aux colonnes factices .
page test :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>test form </title>
<style type='text/css'>
p {margin:0;}
input {vertical-align:middle;padding:0px;}
#un label {display:table-cell;display:inline-block;}
#deux label {float:left;}
label {width:300px;text-align:center;}
#deux p {clear:left;}
form{border:solid;width:600px ;margin:1em auto;}
</style>
</head>
<body>
	<form id="un">
		<p><label>label :</label><input type="text"></p>
		<p><label>label :</label><input type="text"></p>
	</form>
	<form id="deux">
		<p><label>label :</label><input type="text"></p>
		<p><label>label :</label><input type="text"></p>
	</form>
</body>
</html>

GC

<edit> Un second exemple avec plus d'elements et un text-align herité :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>test form </title>
<style type='text/css'>
p {margin:0;padding:10px;text-align:center;}
input , textarea {vertical-align:middle;padding:0px;}
#un label {display:table-cell;display:inline-block;}
#deux label {float:left;}
label {width:300px;}
#deux p {clear:left;}
form{border:solid;width:600px ;margin:1em auto;}
</style>
</head>
<body>
	<form id="un">
		<p><label>label :</label><input type="text"></p>
		<p><label>label :</label><input type="text"></p>
		<p><label>label :</label><textarea></textarea></p>
		<p><input type="submit"></p>		
	</form>
	<form id="deux">
		<p><label>label :</label><input type="text"></p>
		<p><label>label :</label><input type="text"></p>
		<p><label>label :</label><textarea></textarea></p>
		<p><input type="submit"></p>
	</form>
</body>
</html>

Pour ce qui du style des elements de formulaire eux-mêmes , cela restera limité , difference de hauteur et de marges internes des input , scroll sur les textarea , themes du navigateurs ou os , etc ...

[kaele]

Merci pour ces précisions.