Discussion :

[tofito]

Bonjour,

Laissez moi vous faire un dessin plutôt qu'un long discours...

Comme vous pouvez le voir sous firefox, l'affichage est normal... Par contre si vous regardez cette page sous ie6, il y a un décalage de l'image de 2 pixels vers le vas au niveau des 3 onglets...

Quelqu'un verrait-il comment faire pour supprimer ce décalage?

Merci

PS: Vous pouvez voir les codes ici

[Bisûnûrs]

En plus des trois pixels qui apparaissent, tu as le centrage sur IE6 et Firefox qui est différent.

Je te conseille de rafraichir un peu ton code, évite les position:absolute à foison, tu utilises text-align:center sur ton body qui centre tous les éléments block sur IE et non sur Firefox, Des div vide juste pour mettre un background ... mets-le plutôt sur des div existants et avec du contenu.
Bref, un tas de choses à revoir.

Concernant ton fameux bug, c'est parce que tu mets dans ton div de 40px de haut un élément qui en prend plus. IE6 interprète le height comme un min-height, donc agrandi ton div et crée un espace.

[tofito]

Tiens... ouais... j'avais pas fait gaffe que mon header n'est pas correctement centré sur ie... Bon, va falloir que je corrige ça...

Il ne t'a sans doute pas échappé que c'est une page "light", allégée de tout contenu textuel... Bon je viens quand même de rajouter quelques "blabla", là où je mettrai du texte... J'veux bien que tu dises que j'ai des div inutiles mais là, perso... je ne vois pas bien de quel div je pourrais me passer...

Pour ce qui est des "position:absolute à foison", il y en a 1 seul en tout et pour tout... donc ce n'est pas vraiment ce qu'on peut caractériser d'abusif (ce qui est la définition de "à foison"). Je veux bien essayer de faire sans mais je ne vois pas dans ce cas comment je vais superposer mes div...

Bref... tout ça ne constitue pas selon moi "un tas de choses à revoir"... à moins que tu te bases davantage sur du concret.

Pour ma question initiale, j'ai capté comme solutionner le problème... Mais je n'ai toujours pas capté pourquoi ça foire... J'ai une marge en haut du div de 10 pixels de haut, un texte de 12 pixels de haut avec un espace au dessus de 9 pixels et un espace en dessous de 9 pixels... Donc au total: 10+12+9+9= 40 pixels... Donc encore une fois je veux bien que tu me dises que mon div fait plus de 40 pixels de hauteur mais expliques moi dans ce cas comment tu tombes à 42, sinon ça ne sert à rien...

[Bisûnûrs]

Ce n'est pas du font-size qu'il faut tenir compte pour calculer la hauteur d'une ligne de texte, parce qu'il te manque aussi du coup l'interligne. Donc si tu mets le line-height à 12px également, ta ligne de texte interligne comprise fera 12px.

Et voilà à peu près comment j'aurais vu ton header, par exemple :
http://josselin.willette.free.fr/dvp/1541412/

[tofito]

Effectivement avec le line-height: 12px, ça solutionne le problème...
Merci