27613 sujets

CSS et mise en forme, CSS3

Tout d'abord, mes meilleurs voeux à tous !

Et en 2007
je progresse,
en CSS !


Naturellement dans ma quête de savoir je rencontre des cas de figures problèmatiques (portabilité IE6 la plupart du temps).
Comme à chaque fois que je ne trouve pas de réponse dans la littérature sur le sujet, les experts de ce forum m'en ont toujours apporté (avec une pertinence et une rapidité record), je reviens donc à la charge aujourd'hui :


LE CONTEXTE :
Je suis sur une mise en page de type 3 colonnes en largeur fixe (type gabarit d'Alsacréations N°15).
c'est à dire (petit rappel) qu'on a un conteneur de largeur fixe (disons 700px) , que la colonne gauche est positionnée en flottant à gauche, la colonne droite en flottant à droite, et le bloc centre est centré avec des marges latérales de même valeurs que les largeurs de colonne.
Disons que les colonnes latérales font 150px de large chacune et donc le centre 400px.

Maintenant, si dans le flux de mon bloc centre je place une image de la largeur exacte du bloc (400px), IE(6) fait sa crise et vient me la positionner en-dessous des flottants gauche et droite, au lieu de la mettre naturellement entre.

Bien entendu ce problème n'apparaît pas sous Firefox ni Opera (pas testé sur IE7).

http://forum.alsacreations.com/upload/9768-pb-image-et.gif

En outre si je fais des essais en réduisant successivement la largeur de mon image, le probleme disparait à partir de 394px de large. Comme si IE6 forçait des marges externes de 3px sur l'image (alors que j'ai initialisé toutes mes marges à 0).

Quelqu'un connait-il ce problème ?
Avec ce type de mise en page (somme toute assez courante) existe-t-il un moyen de placer une image en pleine largeur dans le bloc central sans que ça bogue avec IE6 ?

Merci d'avance...
Modifié par grrreg (03 Jan 2007 - 12:00)
Modérateur
bonjour,

c'est toujours et encore ces 3 pixels incompressible de IE.

tu peut eventuellement ajouté
un margin-right:-3px; a l'element flottant a gauche
et
un margin-left:-3px; a l'element flottant a droite ,

histoire de reabsorbé ces 3 pixel de trop dans IE.

le "3 pixel jog" , si tu veut faire une recherche.
...

Meilleurs voeux
Modifié par gcyrillus (03 Jan 2007 - 11:54)
Je vais réagir tout seul :

c'est en rédigeant mon message et en calculant que mon souci revenait à un problème de marges de 3px que j'ai réalisé que j'avais déjà lu ça quelque part sur ce forum... En effet il existe visiblement un "bug des 3 px sous IE". Je vais donc aller chercher de ce côté et essayer de répondre à mon problème tout seul dans un premier temps...
C'est qu'est-ce que je disais...

Note pour Raphaël : si c'est un bug si courant qui occupe autant les forums, ce serait pas mal de le faire figurer dans la prochaine édition de son bouquin...

Merci encore !
J'ai exactement le même problème... et j'ai besoin d'aide. S'il vous plait, ou puis-je trouver la solution ?
grrreg a écrit :
Note pour Raphaël : si c'est un bug si courant qui occupe autant les forums, ce serait pas mal de le faire figurer dans la prochaine édition de son bouquin...

Il y a une bonne vingtaine de tels bugs ou comportement inattendus des navigateurs qui hantent les forums. Le Three Pixel Jog n'est pas plus courant que les dépassements de flottants, les problèmes de fusion des marges, la mauvaise utilisation des positionnements relatifs ou absolus, le Doubled Margin Bug, etc.

En toucher un mot, certes. Mais si on veut faire les choses bien, il faudrait écrire un bouquin entier : Bugs CSS2 - Le Design web dans les choux. Smiley ravi
radiCarl a écrit :
J'ai exactement le même problème... et j'ai besoin d'aide. S'il vous plait, ou puis-je trouver la solution ?

Comme dit plus haut, il s'agit du « Three Pixel Jog », un bug bien connu et plutôt bien documenté d'IE6. Je te conseille donc une petite recherche (sur le forum et/ou sur le Web) pour plus d'informations.

À ma connaissance, pas de correctif disponible. On peut juste jouer sur l'application du décalage : sur le texte ou bien carrément sur tout le bloc. Et, si besoin, appliquer un style spécifique pour IE6 via un commentaire conditionnel, pour corriger le décalage avec une marge négative par exemple.

Three Pixel Jog et HasLayout :
http://www.test.blog-and-blues.org/haslayout/tests/float6.html

Pour les commentaires conditionnels, voir la FAQ du forum.
Modifié par Florent V. (08 Feb 2007 - 23:13)