[résolu] Placement décalé sans bordure

Bonjour à tous,

Je me retrouve devant un problème assez spécial... J'ai un vieux décalage sur le haut du header quand je ne met pas de bordure sous Firefox et Opera...

Un exemple vaut mieu qu'un baratin :

Ici avec les bordures

[Lien retiré pour éviter les liens morts.]

Ici sans les bordures

[Lien retiré pour éviter les liens morts.]

Ma CSS qui est très peu longue car je commence tout juste :

http://www.abcourtage.fr/template/inc_css/style.css

J'ai joué avec des padding ou margin à droite à gauche mais rien n'y fait. Quelqu'un aurait une idée ?

Merci
Modifié par jpwalker (27 Apr 2007 - 16:16)

Bonjour,

Tente un overflow: hidden sur div#headerBlock, cela devrait peut être aider.

Bon courage

Bonjour,

div#headerBlock {padding: 1px 0;}

Ça devrait faire l'affaire.

C'est un problème de fusion des marges. La marge supérieure du menu (margin-top: 60px) se transmet au bloc parent (div#headerBlock).

En savoir plus :
http://web.covertprestige.info/test/04-blocs-imbriques-et-fusion-des-marges.html

ghost a écrit :
Tente un overflow: hidden sur div#headerBlock, cela devrait peut être aider.

C'est bien tenté, mais on ne peut pas tout régler à coup de overflow: hidden, hein !

À vrai dire, utiliser un contexte de formatage (ce que provoque le overflow: auto|hidden) pourrait effectivement faire l'affaire, mais il faudra alors utiliser un correctif pour IE6, à coup de HasLayout, avec tous les dangers que ça comporte.
Le bloc conteneur en question avait déjà une hauteur fixe, donc il y avait déjà le HasLayout, mais autant apprendre à se servir d'une solution générique et facile à manier (le padding de 1px).

Note en passant : il me semble qu'un padding de 0.1px serait aussi utilisable, mais je redoute quelques problèmes avec certains navigateurs...
Modifié par Florent V. (25 Apr 2007 - 11:37)

Re,

C'est testé sous FF, IE6, 7 et opera !! ça me semblait "plus propre" qu'un padding-top de 1px sur le header, ou un border-top: 1px ... Ma foi !

ghost a écrit :
C'est testé sous FF, IE6, 7 et opera !! ça me semblait "plus propre" qu'un padding-top de 1px sur le header, ou un border-top: 1px ... Ma foi !

Ça ne passe sous IE6 que grâce au dimensions de div#headerBlock, qui confèrent le layout dans Internet Explorer.

On a donc, sauf erreur de ma part :
- HasLayout dans IE6 ;
- HasLayout et contexte de formatage dans IE7 ;
- contexte de formatage dans Firefox, Opera, etc.

Il faudrait tester sur un bloc non doté du layout pour voir si le overflow: hidden est effectif, mais j'en doute.

Quant à la «propreté» : l'utilisation d'un simple padding pour contenir les marges à l'intérieur d'un blog ne me parait ni illogique, ni «sale». De plus, cette utilisation du padding (qui plus est uniquement dans le sens de la hauteur) me semble bien moins problématique que l'utilisation d'overflow, pas toujours bien apprécié par IE6 (je crois me souvenir de quelques bugs sournois, mais je n'en mettrais pas ma main au feu).