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...

Espacement entre les lignes

Tableau en CSS

Vue hybride

Discussions similaires

Partager

Partager