Espacement indésirable sous IE et interlignage

**chrilie** · 19/05/2008, 20h23

Bonjour,
J'ai identifié l'origine de mon problème, mais ne sais comment le résoudre...
Deux div collées l'une sous l'autre sous FF donnent deux div séparées par un vilain espace horizontal de quelques px quand je change la ligne

Code :

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

font: small/20px "Lucida Sans", "Lucida Grande", "Trebuchet MS";

par

Code :

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

font: small/18px "Lucida Sans", "Lucida Grande", "Trebuchet MS";

Je reporte ci-dessous les codes xhtml et css simplifiés au maximum :

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
<!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">
<head>
 <title>Page de test</title>
 <link rel="stylesheet" type="text/css" href="css/cssTest.css" />
</head>
<body id="home">
 <div id="header">
  <h1>Page test</h1>
 </div>
 <div id="globalnav">
  <ul id="menu">
   <li>Menu 1</li>
  </ul>
 </div>
</body></html>

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
 
body {
 font: small/18px "Lucida Sans", "Lucida Grande", "Trebuchet MS";
}
div#globalnav {
 height: 30px;
 width: 680px;
 background: #aaa;
 border: 0;
 margin: 0;
 padding: 0;
}
div#globalnav ul#menu {
 display: block;
 height: 30px;
 position: relative;
 border: 0;
 margin: 0;
 padding: 0;
}
h1 {
 display: block;	
 width: 600px;
 height: 60px;
 background: #ccc;
 border: 0;
 margin: 0;
 padding: 0;
}

Je remercie ceux qui pourront m'aider à comprendre ce comportement bizarre sous IE.

Christophe

**Erwan31** · 19/05/2008, 21h29

Bonjour,
c'est un des bug assez étranges d'IE déclenché par le layout activé sur les titres Hn (via les propriétés de taille - Voir lien plus loin pour des explication sur le layout).
Les display:block, padding:0 et margin:0 sur les div sont inutiles.
Le display:block des titre est de même inutile puisque les titre sont
des élément de niveaux block.

Contentes toi de ce 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
div#globalnav {
 height: 30px;
 width: 680px;
 background: #aaa;
}
div#globalnav ul#menu {
 height: 30px;
 position: relative;
 margin: 0;
 padding: 0;
}
h1 {
 background: #ccc;
 margin: 0;
}

Le haslayout ou layout était conféré au h1 par les propriétés de taille, tu dois
donc essayer de trouver une alternative à leur utilisation.

**chrilie** · 19/05/2008, 22h39

Merci pour ta réponse, je devenais chèvre !
Christophe

Espacement indésirable sous IE et interlignage

CSS

Vue hybride

Discussions similaires

Partager

Partager