[Résolu] Décalage de 7px vers le bas

Bonjour,

Je suis en train de créer ma page CV (en anglais). La page temporaire est ici

Mon problème se situe au niveau de la jonction entre le header et le bloc qui se trouve dessous. J'ai un décalage de 7 pixels que je ne m'explique pas.

Ce problème est visible sous FF3.6, IE8, Chrome 7.
Il n'apparaît pas sous IE6, IE7 et Opéra 10.

En gros la structure est la suivante :

header
--- div.wrapper
------ 3 floats
div.wrapper
--- section 1 en float
--- section 2 en float
footer
--- div.wrapper

Comme les 3 div.wrapper ne contiennent que des floats, elles font 0px de haut. Elles ne sont là que pour centrer le contenu à 960px de large, le header et le footer faisant 100% du viewport.

Dans firebug, je vois que mon header fait 82px de haut + 1px de brodure. La seconde div.wrapper juste en dessous du header, est positionnée à 90px du haut, soit 7px trop bas.

Je ne met pas le code car je pense que c'est mieux de vous laisser le regarder en entier, dites moi si je me trompe.

J'espère que ce n'est pas trop confus. Merci de votre aide !

Carine
Modifié par mistike (28 Nov 2010 - 19:37)

Bonjour,

header est formaté en inline-block; et est aligné sur le baseline. Ton defaut visuel est le même que tu peut rencontrer avec les images.Il te faut redefinir l'alignement vertical.

header {vertical-align:top;}

... par exemple

Cordialement

Ah, le piège. J'avoue que je n'utilise que très rarement le inline-block, et du coup je le maîtrise mal. Il est temps d'aller relire la doc

Merci gc-nomade, ça marche !