Discussion :

[yamatoshi]

Bonjour,

Je viens de réaliser une boite avec CSS. Dont voici le code

Html

Code :

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

1
2
3
4
5
6
7
8
9
 
 
 
<div id="conteneur">
<div id="head">
<div class="gauche"></div><div class="milieu"></div><div class="droite"></div>
<div class="content"></div>
<div id="bottom"><div class="gauche"></div><div class="milieu"></div><div class="droite"></div>
</div>

css

Code :

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

1
2
3
4
5
6
 
#head .gauche{float:left; backgroun:url(images/gauche.gif) no-repeat;widht:11px; height:11px; }
#head .milieu{float:left; backgroun:url(images/milieu.gif) no-repeat;widht:450px; height:11px;}
#head .droite{float:left; backgroun:url(images/droite.gif) no-repeat;widht:11px; height:11px;}
 
Et de  même pour le bas

Mais j'arrive à ce résultat sous IE 6 mais sous FF ça passe très bien ???

[Invité]

Salut,

Pour commencer, je ne sais pas si c'est en recopiant sur le forum que tu as fais ces fautes mais :

Code CSS :

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

1
2
3
#head .gauche{float:left; background:url(images/gauche.gif) no-repeat;width:11px; height:11px;}
#head .milieu{float:left; background:url(images/milieu.gif) no-repeat;width:450px; height:11px;}
#head .droite{float:left; background:url(images/droite.gif) no-repeat;width:11px; height:11px;}

ainsi que :

Code H :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="conteneur">
	<div id="head">
		<div class="gauche"></div>
		<div class="milieu"></div>
		<div class="droite"></div>
		<div class="content"></div>
	</div>
	<div id="bottom">
		<div class="gauche"></div>
		<div class="milieu"></div>
		<div class="droite"></div>
	</div>
</div>

Il te manquait deux DIV. J'ai indenté le code pour une lecture plus facile.

IE6 gère les margin et les padding de façon exotique, c'est pourquoi on conseille souvent d'initialiser les valeurs à 0 :

Code CSS :

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

* { margin: 0 ; padding: 0 ; } /* initialise tous les éléments. Sans marge, ni bourrage */

Vois déjà ça et dis ce que donne.

[Bisûnûrs]

IE6 gère les margin et les padding de façon exotique, c'est pourquoi on conseille souvent d'initialiser les valeurs à 0

Heu, non. Il n'a simplement pas les mêmes valeurs par défaut pour certains éléments. D'ailleurs chaque navigateur les a propre.

Concernant le problème en question et pour paraphraser un de mes posts dans un autre sujet :

Ce problème survient quand vous avez spécifié une hauteur inférieure au line-height calculé du div. En effet, IE6 alloue automatiquement l'espace nécessaire à un texte éventuel.

Vu que le line-height est calculé à partir du font-size, on peut attribuer un font-size de 0 pour le div en question:

Code html :

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

<div style="height:10px;font-size:0"></div>

Malgré un font-size de 0 il est impossible d'obtenir une hauteur de 1px sur IE6, ce que permet de faire la propriété overflow:

Code html :

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

<div style="height:1px;overflow:hidden"></div>

[Macmillenium]

c'est pourquoi on conseille souvent d'initialiser les valeurs à 0 :

Code CSS :

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

* { margin: 0 ; padding: 0 ; } /* initialise tous les éléments. Sans marge, ni bourrage */

Qui a conseillé ça ? c'est plutôt la pire des règles CSS !

S'inspirer de la feuille de style par défaut publiée par le CSS WG http://www.w3.org/TR/2007/CR-CSS21-20070719/sample.html
Ou une méthode de reset CSS proposée par le fameux Eric Meyer http://meyerweb.com/eric/thoughts/20...setting-again/