[Résolu] Margin-top négatif : problème sous IE7

Bonsoir à tous,

J'ai un petit soucis de marge
J'utilise un margin-top négatif pour que le div "content" chevauche le div "header" sous FF 2 tout fonctionne, sous IE 7 et IE 6 ça ne marche pas pareil...

Voici les screens pour comprendre :

Sous FF 2, c'est bon :
http://www.hiboox.com/vignettes/1207/34ccdc11.png

Sous IE 7, ce n'est pas ce que je recherche... :
http://www.hiboox.com/vignettes/1207/dbbaa383.png

Code CSS :

* {
margin: 0;
padding: 0;
border: 0;
font-family: sans-serif;
font-size: 1em;
font-weight: normal;
font-style: normal;
text-decoration: none;
}

body {
	background-color: #000000;
}

#wrapper {
	background-color: #fff;
	text-align: center;
}

#header {
	background-color: #009999;
	width: 1000px;
	height: 140px;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
}

#content {
	background-color: #ccff00;
	width: 760px;
	height: 500px;
	text-align: left;
	margin-top: -50px;
	margin-left: auto;
	margin-right: auto;
}

#footer {
	background-color: #ff0000;
	width: 1000px;
	height: 140px;
	text-align: left;
	margin-top: -50px;
	margin-left: auto;
	margin-right: auto;
}

Code XHTML :

<div id="wrapper">
	<div id="header"></div>

	<div id="content"></div>
	
	<div id="footer"></div>
</div>

Avez vous une solution pour ce problème qui va me gêner pour la suite ?
Modifié par tankia (25 Mar 2007 - 15:31)

Petite question : le margin-top négatif est une déclaration conforme ?

Je croyais que non...

Bonsoir Tankia,
En effet tu es tombé sur un bug de layout assez étrange, le genre de bug
deroutant pour celui ou celle qui n'a pas encore eu connaissance du concept
de haslayout. A ce propos je te conseil vivement de lire si tu as un peu de temps au moins la première partie de cet article.
ça te fera gagner de précieuses minutes quand tu sera confronté de
nouveau à ce genre de problème.

Au lieu de passer sur le div header le div content pousse le header
vers le haut.

la solution : ajouter un height:1% a #wrapper ou mieux, dans une feuille
de style en commentaire conditionnel qui vise IE. (cf la FAQ)

#wrapper {
        height:1%;
	background: #fff;
	text-align: center;
}

Autre chose :

* {
border: 0;
font-family: sans-serif;
font-weight: normal;
text-decoration: none;
}

Je sais pas si tu as pu lire la réponse de Florent sur ton message précédent
mais il est préférable d'éviter certaines suppression de propriétés par default du navigateur
comme border:0 (pas trés recommandé pour tous les élément html des formulaire > fielset, input)
Préférer plutôt

a img {border:0}

pour supprimer les bordures des images lien.
> la police générique de font-family se définit au niveau du body en règle général
> font-weight:normal : les titres en maigre c'est pas très voyant...
> text-decoration: none ne s'applique qu'aux textes.
Modifié par Hermann (24 Mar 2007 - 22:00)

Aris Boch a écrit :
Petite question : le margin-top négatif est une déclaration conforme ?

Question intéressante...
Je viens de parcourir la spécification CSS 2.1 (du moins les parties qui nous concernent), et nulle part il n'est fait mention de marges négatives. Du coup, il se pourrait bien que ce cas de figure (valeur négative pour un margin-*) ne soit pas normé, mais laissé à l'appréciation de chaque navigateur.

Et sinon, deux remarques :
- peut-être était-il possible d'utiliser le positionnement relatif pour décaler le bloc vers le haut ?
- on peut peut-être se passer d'un « décalage vers le haut », si tout ce qu'on a besoin de faire c'est de donner l'impression que le bloc de contenu mange sur l'en-tête. Ça dépendra du design à réaliser...

Bonjour à tous !

Merci pour vos réponses qui m'apprennent beaucoup de chose sur les css

J'ai mis un position:relative sur l'id header et l'id content, et l'effet que je veux fonctionne sous FF 2 et IE 7 & 6. Donc mon problème est résolu sans utiliser la technique haslayout. Mais je garde ton lien Hermann en favoris il est très intéressant.

Voici le screen de ce que ça donne :
http://www.hiboox.com/vignettes/1207/b48d17b3.png

Le css qui fonctionne avec position:relative :

#header {
	position: relative;
	background-color: #009999;
	width: 1000px;
	height: 140px;
	text-align: left;
	margin-left: auto;
	margin-right: auto;
}

#content {
	position: relative;
	background-color: #ccff00;
	width: 760px;
	height: 500px;
	text-align: left;
	margin-top: -50px;
	margin-left: auto;
	margin-right: auto;
}

En plus le footer se met en dessous du content c'était exactement ce que je voulais

Pour le "reset css" que j'ai mis au début, ne vous inquiétez pas derrière j'applique bien les styles à tous les éléments qui seront sur la page. Je ne laisse jamais un style par défaut, car ça ne me convient jamais (saut de ligne des paragraphe, style des formulaires, graisse ou non des titre, etc...) et donc je les redéfinis toujours pour que ça colle à ma maquette photoshop.

Florent V. a écrit :
Je viens de parcourir la spécification CSS 2.1 (du moins les parties qui nous concernent), et nulle part il n'est fait mention de marges négatives. Du coup, il se pourrait bien que ce cas de figure (valeur négative pour un margin-*) ne soit pas normé, mais laissé à l'appréciation de chaque navigateur.

Effectivement, je n'ai rien trouvé non plus à ce sujet. Ceci dit, on peut sans trop de risques s'avancer sur le fait que ce soit parfaitement conforme aux normes CSS2.1 si l'on se base sur l'analyse que fait le service de validation css du w3c à ce sujet.

Bonjour,

a écrit :
Question intéressante...
Je viens de parcourir la spécification CSS 2.1 (du moins les parties qui nous concernent), et nulle part il n'est fait mention de marges négatives. Du coup, il se pourrait bien que ce cas de figure (valeur négative pour un margin-*) ne soit pas normé, mais laissé à l'appréciation de chaque navigateur.

En réalité toute référence à une valeur numérique peut admettre des valeurs négatives ou positives, c'est vrai pour les indications de marges, de padding, de couche mais aussi pour les dimensions par exemple, bien que ce soit incorrect...

C'est donc la nature de la propriété qui détermine la plage d'utilisation de des valeurs numériques en CSS.

Par exemple cette déclaration width:-100px sera simplement ignoré, une boite ne pouvant pas, par nature, avoir des "dimensions" négatives.

En revanche, margin comme padding acceptent les valeurs négatives.

a écrit :

4.3.1 Les entiers et les nombres
Quelques valeurs peuvent avoir le type entier (dénoté par <integer>) ou le type nombre (dénoté par <nombre>). Les nombres et les entiers sont seulement spécifiés en notation décimale. Un <entier> consistent un, ou plusieurs, chiffres de "0" à "9". A <nombre> peut être un <entier> ou encore zéro, ou plusieurs chiffres, suivi par un point (.) et un, ou plusieurs, chiffres. Les deux types pouvant être précédés par le signe "-" ou "+".

Noter que plusieurs propriétés, qui admettent comme valeur un entier ou un nombre, limitent en fait leurs valeurs dans une plage donnée, souvent à une valeur positive.
4.3.1 Les entiers et les nombres

Bonjour,

jpv a écrit :

En réalité toute référence à une valeur numérique peut admettre des valeurs négatives ou positives, c'est vrai pour les indications de marges, de padding, de couche mais aussi pour les dimensions par exemple, bien que ce soit incorrect...
En revanche, margin comme padding acceptent les valeurs négatives.

Sauf que les padding négatif ne sont pas appliqués.
Qu'y a-t-il d'incorrect dans les marge négatives? S'il elles
sont applicables, je ne vois pas ou est le problème.
Modifié par Hermann (25 Mar 2007 - 16:34)