Margin-top différence IE, Firefox (enfin jpenses)

Salut,
Je suis en train de faire la mise en page de mon site et j'ai un soucis pour coder:
regardez plus:

http://secretliar.free.fr/bug%20alsa/alsa.htm

Vous voyez le décalage selon firefox et internet explorer?

Quand le div.a (qui est dans le div.conteneur) veut ajouter de la marge par rapport au top, bah c'est carrément le conteneur qui prends de la marge :S
Je veux que le div.a ai une marge dans le conteneur vous voyez?
Je voudrais que firefox affiche comme internet explorer :S


Merci d'avance
Romain
Modifié par demonofparadise (06 Aug 2008 - 15:24)

Hello,

Déjà, tu a un <div> qui n'est pas fermé.
Ensuite, Firefox ne peut pas appliquer le margin-top de 20px car, selon une logique que je n'ai jamais trouvé très juste, il ne peut appliquer ce genre de margin que s'il a un "coté" contre lequel pousser. En l'occurence là, il "pousse" contre le coté de ta fenetre plutot que contre le coté du conteneur.

Tu peux rajouter un border-top à ton conteneur et dans ce cas le margin fonctionnera comme tu le souhaite.

Mais tu peux aussi mettre un padding-top:50px à #conteneur, ça marche aussi.

Tymlis a écrit :
Ensuite, Firefox ne peut pas appliquer le margin-top de 20px car, selon une logique que je n'ai jamais trouvé très juste, il ne peut appliquer ce genre de margin que s'il a un "coté" contre lequel pousser. En l'occurence là, il "pousse" contre le coté de ta fenetre plutot que contre le coté du conteneur.

La logique en question fait partie de la spécification CSS 2, cela s'appelle la fusion des marges (collapsing margins), et c'est appliqué par tous les navigateurs du marché, y compris par IE. Dans les cas où IE ne l'applique pas alors qu'il devrait, c'est un bug, en général un effet de bord du HasLayout.

La fusion des marges entre élément parent et enfant est décrite ici:
http://web.covertprestige.info/test/04-blocs-imbriques-et-fusion-des-marges.html

Quant à la question de la justesse de cette logique... eh bien l'essentiel ait qu'il y ait une logique, et qu'elle soit respectée par les navigateurs (ce qui est globalement le cas). Pour ma part je la trouve très intéressante. En particulier, elle est très puissante pour la gestion du texte (quiconque a déjà essayé de gérer au mieux les marges de styles de paragraphes dans un document Word ou Writer sait de quoi je parle). Pour les éléments imbriqués, c'est surprenant mais ça a parfois son utilité (par exemple lorsqu'on place des paragraphes dans des éléments LI ou BLOCKQUOTE).
Modifié par Florent V. (06 Aug 2008 - 16:02)

Bah la bordure, c'est niquel mais le soucis que y'a un fond derrière et ça fait pas très très beau :S

Pour la padding-top:50px dans le #content au lieu du margin-top:50px dans le #a, c'est niquel dans le sens ou ça ajoute pas une bordure mais ça déforme le div sous Firefox :S

Sous IE, ça reste niquel
Sous Firefox, ça ajouter 50px en haut :S
Au lieux de décaler le div en haut, ça majoute le tit bout qui manquait et donc du coup il est plus long :S

Dans le pire pire des cas jprendrais la bordure mais bon jpréfèrerais éviter xD

Salut,

Il te reste à tester un overflow: auto; à ton conteneur

Soit j'ai pas compris soit l'ajout du overflow:auto ne change rien :S

Si quelqu'un a compris, il pourrait le modifier et me faire voir le code corrigé?

C'est bon!
J'utilise border avec couleur transparente.

demonofparadise a écrit :
J'utilise border avec couleur transparente.

Ou un padding-top: 1px ou un overflow: hidden ou un overflow: auto sur le bloc conteneur (donc, ici, div.content). Les trois fonctionnent.

En passant:
- le height:100% sur div.conteneur est une mauvaise idée (un min-height: 100% serait plus adapté, bien qu'en l'état ce conteneur global ait l'air parfaitement inutile);
- ne jamais faire de page de test sans Doctype;
- le positionnement du bloc de droite avec une marge négative est un bricolage douteux à oublier.