28172 sujets

CSS et mise en forme, CSS3

[Résolu] Probleme Margin-Top css sous Firefox

Bonjour,
j'ai un problème avec Firefox, quant je met un margin-top a un div il me décale le div en question et son div parent (qui a le fond) et du coup on voit mon image de fond en haut (voir capture).

upload/21190-capture.ma.jpg

régler avec un padding-top, mais j'aime bien comprendre.
Quelqu'un a une explication ?
merci
Modifié par pflomo (24 Apr 2009 - 10:35)
Bonjour,

Le problème que tu rencontre est en fait tout à fait normal.

Le modèle de boite HTML standard est celui :

marge | div | padding

(ou un article avec un schéma)

Pour que tu trouve ce comportement surprenant avec FF, je suppose que tu en a un différent avec IE, il y a donc de fortes chances que tu n'utilise pas de doctype et qu'IE utilise le mode de rendu "quirks" qui a un modèle de boite différent et propre à Microsoft.
Modifié par Laurie-Anne (23 Apr 2009 - 18:42)
Merci de ta réponse Laurie-Anne
Peux développer un peu svp ?

je ne comprends pas pourquoi au lieu de créer la marge entre le div enfant et parent (comme d'habitude) il la créé au dessus du div parent.

mon doctype et le suivant :
<!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">


j'ai jeter un œil ici pour le rendu "quirks" (je n'ai pas tout compris Smiley cligne ) : http://www.alsacreations.com/actu/lire/273-choix-dune-dtd-le-doctype-switching-nest-pas-pour-nous.html

du coup je me demande si je me suis bien exprimer.

<div id="grande_image_fond">
<div id="fond_colonne">
<div id="bloc_txt_avec_margin-top">
txt
</div>
</div>
</div>

quant j'applique un margin-top de 30px au div "bloc_txt_avec_margin-top"
cela l'applique au div "fond_colonne" au lieu de créer un espace entre "bloc_txt_avec_margin-top" et "fond_colonne".

On parle bien de la même chose ?
Merci beaucoup
c'est exactement cela et c'est donc normal merci.
je n'avais jamais fait attention a la fusion des marges enfant—parent Smiley smile
Sujet clos
Aller à