Grmbl de css

Dev
1

Bonjour la zone,
Je ne connais pas trop le CSS…
Voilà le problème: je suis en train de réaliser un site avec spip.
Petit problème: je veux afficher un bandeau en haut du site.
Sous IE, pas de problèmes, en revenche, avec Mozilla, c’est du grand n’importe quoi. Mes cadres se chevauchent.
Voici le code CSS incriminé:

#principal { position: absolute; left: 30%; top: 115px; margin: 0px; padding: 0px; margin-right: 3%; margin-top: 1.5em; }

(bon, je ne met pas tous les codes CSS incriminés, mais juste un pour l’exemple).
Or, dans ce cas, mon bloc est bien à 115 pixel du haut de la page avec IE, mais sous mozilla, il reste « coincé » en haut.

Je craque, ça fait un moment que je cherche sur le net, mais en vain (j’ai pas du poser les bonnes question à mon ami google :P" ).

Voilà, j’imagine que je ne suis pas le premier à qui ça arrive… Donc, si vous pouvez m’aider, j’apprécierais grandement :stuck_out_tongue:

2

Tu indiques top, margin, et margin-top : tes navigateurs peuvent placer ton élément à 3 positions différentes :

A 115 pixels si ils suivent le top
A 0 pixels si ils lisent le margin
A 1.5 em si ils interprètent le margin-top

Tu sais lequel appliquer ? Moi non, j’imagine que c’est pareil pour le navigateur. Mozila fait un choix, IE en fait un autre. C’est pas clair …

3

C’est clairement un problème de modèle de boites (box model chez nos amis anglo saxon), je te suggère d’ailleurs de faire une recherche avec l’ami de l’internaute pour trouver toute une chiée d’article pour t’expliquer ce que c’est exactement.
Sinon, il faut préciser que les CSS sont un langage linéaire : il lit ligne par ligne et si il trouve 2 infos identiques, c’est la plus récente qui compte.
Dans ton exemple, tu met le margin à 0 puis tu mets le margin-top à 1.5em donc (et ce quel que soit le navigateur), la margin-top sera à 1.5 em et pas à 0.

Mais tout ça ne résoud pas ton problème.
Puisque tu mets ta box en position:absolute, elle est retirée du flux de la page, en gros ça veut dire que tu lui donnes, manuellement, sa position exact dans la fenêtre de ton browser. En absolute les éléments sont placés sur des couches (z-index) et il ne peut pas y en avoir 2 sur la même couche (sinon ça part en sucette), donc tes valeurs de margin qui servent à donner de l’espace entre tes éléments, il ne servent à rien…parce que tu n’auras pas 2 éléments sur le même z-index.
Ce que je te suggère c’est de virer toutes les lignes margin et padding…

Maintenant il y a quelques gurus des css qui trainent dans le coin, donc si tu veux un debug, tu peux toujours poster toute ta feuille de style et un screen de ce que ça fait.

4

Je confirmes que le margin est inutile par contre le padding sert a avor un décalage dans l’élément. Ca n’a donc rien à voir avec le positionnement de l’élément par rapport a la page.

5

Oui c’est vrai au temps pour moi…mais de toute façon il est à 0 par défaut, le repréciser n’est pas bien utile.