Dimensions incorrectes d'un div sous IE

**vg33** · 05/11/2005, 15h06

Voici le code html de mon div :

Code :

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

<div id="carre_nom_chapitre">&nbsp;</div>

Et voici la css associée :

Code :

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

1
2
3
4
5
6
7
8
#carre_nom_chapitre {
	background-color: #fd0b0b;
	height: 20px; 
	width: 20px;
	position:absolute;
	top:5px;
	left:15px;
	}

Sous Firefox 1.7 et Opéra 8.5, tout s'affiche bien. J'ai un joli carré de 20px de côté.
Mais, comme d'habitude, sous IE 6, ça bugue : j'ai un rectangle de 20 px de hauteur et environ 40 px de large. A quoi est-ce dû ? Et existe-t-il une façon d'obliger IE à afficher un div de la taille que je veux (et non pas de celle qu'il veut m'imposer !) ?

**spirou** · 05/11/2005, 17h00

Salut !!

Tu es sûr qu'il n'y a pas autre chose, car ton code me fait bien un carré de 20*20 avec ie6.

**vg33** · 05/11/2005, 19h23

Pour être complet, voici mon début de code 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
30
31
32
33
34
35
36
37
38
39
<body>
 
<!-- Haut de page -->
<div id="haut_de_page">
 
<!-- bandeau -->
  <div id="bandeau">
		<img src="../../bibliotheque/images/logos/bandeau_zone_publique.jpg" alt="Bandeau zone publique" usemap="#menu_rapide_haut"/>
 
<!-- menu rapide haut -->
      <map name="menu_rapide_haut">
        <area shape="circle" coords="880,25,19" href="../../accueil.php" alt="Retourner à la page d'accueil" title="Retourner à la page d'accueil" />
        <area shape="rect" coords="841,41,895,61" href="../../accueil.php" alt="Retourner à la page d'accueil" title="Retourner à la page d'accueil" />
        <area shape="circle" coords="923,25,15" href="../../zone_mixte/infos/plan_site.php" alt="Plan du site" title="Plan du site" />
        <area shape="rect" coords="899,38,942,70" href="../../zone_mixte/infos/plan_site.php" alt="Plan du site" title="Plan du site" />
 
        <area shape="circle" coords="961,25,14" href="../../identification.php" alt="Accéder à la zone privée" title="Accéder à la zone privée" />
        <area shape="rect" coords="948,34,999,66" href="../../identification.php" alt="Accéder à la zone privée" title="Accéder à la zone privée" />
      </map>
 
<!-- menu rapide haut alternatif-->
      <p>
  			<a href="../../accueil.php" title="Retourner à la page d'accueil">Accueil</a>&nbsp;&nbsp;|&nbsp;&nbsp;
        <a href="../../zone_mixte/infos/plan_site.php" title="Plan du site">Plan du site</a>&nbsp;&nbsp;|&nbsp;&nbsp;
 
        <a href="../../identification.php" title="Accéder à la zone privée">Zone privée</a>
			</p>
 
  </div>
 
<!-- infos haut -->
  <div id="infos_haut">
  	<div id="infos_haut_nom_chapitre">
 
			<div id="carre_nom_chapitre">&nbsp;</div>
<a href="../../zone_publique/projet/index.php" title="Le projet initial">Le projet</a>
 
</div></div>
<

Et les css correspondantes :

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
/* partie haute */
#haut_de_page {
  margin:0;
  padding:0;
  font-family: "Courier New", Courier, mono;
  min-width:980px;
  }
#haut_de_page p {
  margin:0;
  }
/* bandeau */
#bandeau {
  position:absolute;
  top:0px;
  height:80px;
  min-width:980px;
  width:100%;
  background:url("../images/fondgris.jpg") repeat;
  }
 
/* information hautes (nom du chapitre) */
#infos_haut {
  position:absolute;
  top:80px;
  padding:0;
  min-width:980px;
  width:100%;
  height:40px;
  background-color:white;
  line-height:normal;
  }
#infos_haut_nom_chapitre {
	position:absolute;
	top:10px;
	left:0px;
	color:#fd0b0b;
	font-size:25px;
	font-weight:bold;
  padding-top:3px;
  background-color:white;
  line-height:normal;
  text-indent:45px;
  }
#infos_haut_nom_chapitre a{
	color:#fd0b0b;
	font-weight:bold;
	text-decoration:none;
  }
#infos_haut_nom_chapitre a:hover{
	color:#fd0b0b;
	font-weight:bold;
	text-decoration:none;
  background-color:white;
  }
#carre_nom_chapitre {
	background-color: #fd0b0b;
	height: 20px; 
	width: 20px;
	position:absolute;
	top:5px;
	left:15px;
	}

Merci d'avoir testé mon code

Si tu peux trouver l'erreur...

**francis m** · 05/11/2005, 20h56

pffff j'ai eu du mal
pour la largeur, c'est ton text-indent de 45px dans ton id infos_haut_nom_chapitre qui fait cela...
pour la hauteur, c'est toujours dans ce même id la taille des caractères égale à 25px