Espacement entre les lignes

**jadorelescss38** · 05/04/2007, 11h08

Bonjour,

j'ai un petit problème de rendu avec Internet Explorer:
J'ai du texte dans un <div> mais l'espacement entre les lignes ne me convient pas. J'ai donc rajouter ceci dans ma feuille de style:

line-height: 30px;

Le rendu est fidèle à ce que je souhaitais obtenir sur Mozilla Firefox.
En revanche, sur Internet Explorer le "line-height" n'est pas pris en compte.

Je cherche donc une autre façon d'espacer mes lignes qui soit pris en compte sur Internet Explorer.

(évidement je ne souhaite pas mettre un <br/> entre chaque ligne)

Merci d'avance.

**MasterOfChakhaL** · 05/04/2007, 11h10

Salut,

"line-height" est reconnu par IE. Peut-être devrais tu nous montrer un code plus complet et/ou un lien vers une page qui présente le souci.

**jadorelescss38** · 05/04/2007, 11h31

Voici la partie de la feuille de style qui nous intéresse:

Code :

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

1
2
3
4
5
6
7
8
#invisiblea_1, #invisibleb_1, #invisiblec_1, #invisibled_1, #invisiblee_1, #invisiblef_1  {
line-height: 30px;
padding: 5px;
border: solid 1px #FFFFFF;
margin-left: 40px;
background-color: pink;
height: 0%;
}

Voici par exemple une div en question:

Code html :

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
<div id="invisiblea_1" style="display:none">
		The part has an aesthetic function <INPUT type="checkbox" value="aesthetic"><br />
		The part is transparent <INPUT type="checkbox" value="transparent"><br />
		Which color do you wish <SELECT value="color" size="1">
							<OPTION>black</OPTION>
							<OPTION>blue</OPTION>
							<OPTION>cream</OPTION>
							<OPTION>green</OPTION>
							<OPTION>grey</OPTION>
							<OPTION>natural</OPTION>
							<OPTION>orange</OPTION>
							<OPTION>red</OPTION>
							<OPTION>white</OPTION>
							<OPTION>yellow</OPTION>
								</SELECT><br />
	</div><br />

Sachant que cette div est directement dans les balises <body></body>

**MasterOfChakhaL** · 05/04/2007, 13h17

Tu as un display: none; ...
Au niveau du rendu visuel, c'est comme si tu n'avais pas ta div dans la source.

Si tu veux que les éléments ne s'affichent pas mais que la place qu'ils devraient occuper soit pris en compte, il faut que tu remplaces display: none; par visibility: hidden;

**jadorelescss38** · 05/04/2007, 14h25

A ok je savais pas que sa venait de là...
En fait, j'ai un grand formulaire dont des parties sont cachés et apparaissent quand certains checkbox sont cochés par l'utilisateur (avec des parties cachées à l'intérieur d'autres parties cachées et les <input> qui se réinitialise quand les parties cachées redeviennent cachées...etc etc etc) d'où la présence du "display:none" (qui prend la valeur "block" grace a une fonction javascript).

Je vais essayer avec le "visibility: hidden;"

Merci beaucoup de ton aide.

**jadorelescss38** · 05/04/2007, 16h12

Bon visiblement, j'avais raison le "line-height" n'est pas pris en compte par IE.
Voici un exemple basique:

Code html :

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
<html>
	<head>
		<title>Test d'espacement entre les lignes</title>
 
		<style type="text/css">
                        #test {
                        color: blue;
                        line-height: 60px;
                        }
                </style>
	</head>
 
	<body>
		<div id="test">
			<form name="formulaire" method="post" action="result.html">
				The part has an aesthetic function <INPUT type="checkbox" value="aesthetic"><br />
		The part is transparent <INPUT type="checkbox" value="transparent"><br />
		Which color do you wish <SELECT value="color" size="1">
							<OPTION>black</OPTION>
							<OPTION>blue</OPTION>
							<OPTION>cream</OPTION>
							<OPTION>green</OPTION>
							<OPTION>grey</OPTION>
							<OPTION>natural</OPTION>
							<OPTION>orange</OPTION>
							<OPTION>red</OPTION>
							<OPTION>white</OPTION>
							<OPTION>yellow</OPTION>
								</SELECT><br />
			<form>
		</div>
	</body>
</html>

L'espacement est présent sous FF mais pas sous IE.
Si quelqu'un sait comment je peux faire en sorte de définit mon espacement entre les lignes sous IE...

**Candygirl** · 05/04/2007, 16h24

Bonjour,

Envoyé par jadorelescss38

Bon visiblement, j'avais raison le "line-height" n'est pas pris en compte par IE.

Dans ton exemple, tu n'as pas spécifié de doctype en haut de ta page. En en spécifiant un, tu verras qu'IE appliquera le line-height avec ton code.

**jadorelescss38** · 05/04/2007, 16h39

Désolé de faire le boulet mais sa marche toujours pas...

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
<style type="text/css">
 
.banniere {	
	position: relative;	/* bloc référent pour le positionnement du bloc du bas */
	margin: 1px;
	padding: 2px;
	padding-bottom: 40px;
	border: 1px solid #D5D5D5;
	background-color: #F4F4F4;
	font-size: 11px;
	width: 99%;
	background-image: url(../images/fond_bloc.gif);
	background-repeat: no-repeat;
	background-position: right bottom;
	}
 
 
 
.banniere_bas {	/* contient les deux blocs à positionner */
	width: 98%;	/* divisible par 2*/
	overflow: hidden;
	position: absolute;
	bottom: 0;
	left: 50%; /* centrage du bloc */
	margin-left: -49%; /* centrage du bloc */
	height: 40px; /* donner une hauteur pour prévoir le padding correspondant au bloc conteneur sinon chevauchement*/
	}
 
 
 
.banniereg {
	float:left;	
	margin: 1px;
	padding: 2px;
	border: 1px solid #D5D5D5;
	font-size: 11px;
	width: 48%;
	}
 
 
 
.banniered {
	float:right;
	margin: 1px;
	padding: 2px;
	border: 1px solid #D5D5D5;
	font-size: 11px;
	width: 48%;
	}
 
 
 
</style></head>
 
<body>
 
<div class="banniere"><p>Lorem</p>
	<div class="banniere_bas">
        <div class="banniereg">
          	<p>Lorem ipsum ...</p>
		</div>
        <div class="banniered">
         	<p>Lorem ipsum ...</p>
		</div>
	</div>
</div>
 
</body>
 
</html>

Mon doctype n'est pas bon ?

**Candygirl** · 05/04/2007, 16h53

Je ne vois pas de line-height dans le code ci-dessus?

**jadorelescss38** · 05/04/2007, 17h08

J'ai fait le boulet !!!
j'ai pas copier le bon code.... :-)
Mille excuses...

C'est la fatigue de fin de journée....
Je rectifie sa tout de suite

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
		<title>Test d'espacement entre les lignes</title>
 
		<style type="text/css">
			#test {
			color: blue;
			line-height: 60px;
			}
		</style>
	</head>
 
	<body>
		<div id="test">
			<form name="formulaire" method="post" action="result.html">
				The part has an aesthetic function <INPUT type="checkbox" value="aesthetic"><br />
		The part is transparent <INPUT type="checkbox" value="transparent"><br />
		Which color do you wish <SELECT value="color" size="1">
							<OPTION>black</OPTION>
							<OPTION>blue</OPTION>
							<OPTION>cream</OPTION>
							<OPTION>green</OPTION>
							<OPTION>grey</OPTION>
							<OPTION>natural</OPTION>
							<OPTION>orange</OPTION>
							<OPTION>red</OPTION>
							<OPTION>white</OPTION>
							<OPTION>yellow</OPTION>
								</SELECT><br />
			<form>
		</div>
	</body>
</html>

**Candygirl** · 05/04/2007, 17h55

ça aurait pu être bien de spécifier que tu regardais avec IE6...

Sur IE7, le doctype permettait de résoudre le problème, par contre la présence de la checkbox semble poser problème à IE6 quand bien même un doctype correct est spécifié...

Perso, je pense que je contournerais le problème avec une structure traditionnelle de formulaire du genre (d'ailleurs en strict tu ne peux pas injecter directement du texte dans ton formulaire sans une balise p, div,...):

Code html :

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

1
2
3
4
5
<form>
  <p><label></label><input /></p>
  <p><label></label><input /></p>
  <p><label></label><select></select></p>
</form>

**Bisûnûrs** · 05/04/2007, 18h39

A partir du moment qu'il y a autre chose que du texte, même si c'est un élément inline, IE6 ne tient pas compte du line-height .. Exemple tout con : un texte et une image.

**jadorelescss38** · 06/04/2007, 09h56

OK. Merci pour votre aide.
Je vais revoir la façon de faire mon formulaire.

Espacement entre les lignes

Tableau en CSS

Discussions similaires

Partager

Partager