28220 sujets

CSS et mise en forme, CSS3

Salut,

Encore un problème de positionnement de plus...

Sous firefox, tout est nikel mais sur ie le bloc #content se retrouve décalé vers le bas.

J'ai essayé de nombreuses configurations avec float, position, etc... Je me retrouve toujours avec 2 comportements différents avec les navigateurs.

Voici la page : http://www.tuto-geek.com/new
Et le css correspondant : http://www.tuto-geek.com/new/css/style.css

Merci Smiley smile
Modifié par Worm (29 Jan 2007 - 17:40)
Smiley eek Je viens de voir que lorsqu'on mes width:774px à #container, c'est à dire 3 pixels de plus que la normale, le bug se résorbe !

Evidemment vu que l'on augmente de 3pixels, des petits décalages apparaissent, donc pas génial comme solution...

Quelqu'un pour expliquer ça Smiley ohwell ?
Worm a écrit :
Quelqu'un pour expliquer ça Smiley ohwell ?

Facile.

Le bug du Three Pixel Jog (décalage de 3px des blocs dotés de layout et jouxtant un flottant) décale div#content de 3px vers la droite. Comme div#content a une largeur fixe pour le faire tenir au pixel près dans l'espace restant à droite du flottant, il ne tient plus, et passe à la ligne.+

Si tu augmentes la taille du conteneur global de 3px, div#content a alors la place de se loger, et ne passe pas à la ligne.

Solution : virer la largeur fixe de div#content. La marge à gauche suffit à lui donner une dimension (toute la largeur du conteneur, moins la marge de gauche, moins les 3px du Three Pixel Jog pour Internet Explorer = la largeur finale du bloc).

Note : une fois la largeur fixe assassinée sauvagement, div#content ne passera plus à la ligne. Par contre, il sera décalé de trois pixels vers la droite par rapport aux autres navigateurs. Il pourra être utile d'apporter un correctif pour IE6, en diminuant la marge de gauche de 3px pour ce navigateur.

Bien entendu, les correctifs pour IE6 se font uniquement via des commentaires conditionnels, et jamais en utilisant des hacks CSS. Pour plus d'informations : rechercher « hack » et « commentaires conditionnels » dans la FAQ du forum.
Merci pour cette analyse, je ne connaissais pas ce bug.

J'ai donc un peu recherché les solutions pour résoudre le bug et j'ai reussi a trouver mon bonheur, merci Smiley smile