[Résolu] Pixel en trop dans IE =)

Hello !

Bon il faut dire j'ai pas de chance =)

J'avais commencé à faire une mise en page avec les tableaux et j'ai rencontré un problème dans firefox relativement bizarre, pour moi en tout cas. Il y avait un pixel vertical en trop dans une cellule avec une image :

http://forum.alsacreations.com/topic-2-15752-1-Pixel-superflu-apres-une-image-dans-Firefox.html

Bref, je me suis dit essayons de faire ça en CSS.

Tout était bien parti, je verifiais tout le temps dans IE et FF à chaque modification et a la fin les 2 derniers DIV qui ne sont à priori pas differents des precedents posent un probleme !

Maintenant c'est IE qui rajoute un pixel horizontal !!

Donc je me retrouve avec un probleme diametralement opposé, d'un coté Firefox qui rajoute un pixel vertical avec les tableaux et de l'autre coté IE qui rajoute un pixel horizontal avec les DIV (riez pas ^^)

http://www.snakecomputer.com/DIV_TEMPLATE.HTML

http://www.snakecomputer.com/pixel.jpg

Voila =)

Si un pro de CSS peut m'indiquer le bon chemin à prendre pour debloquer la situation, je lui sera reconnaissant.

Sachant que le pire est à venir niveau div à l'interieur des blocs =)

Merci d'avance !

PS : le css est directement dans la page HTML.
Modifié par astronaute (02 Jul 2006 - 18:56)

astronaute a écrit :
Bon il faut dire j'ai pas de chance =)

Tu essaies absolument de faire un design au pixel près. De plus, ce design n'est pas conçu avec la moindre marge de manœuvre pour compenser les différences d'interprétation, d'implémentation ou tout simplement de styles par défaut des navigateurs. Donc forcément, tu risques d'affronter ce genre de petits problèmes.

Au passage, sous Firefox ta page fait juste un pixel de plus que ce qui est nécessaire. Cela fait apparaître une barre de défilement active, alors qu'il n'y a qu'un malheureux pixel à faire défiler. C'est assez perturbant, du point de vue de l'ergonomie.

C'est peut-être lié à un problème de fusion des marges : voir blocs imbriqués et fusion des marges.

salut Astronaute,

IE a du mal avec les petites hauteurs (cf FAQ). Dans ce cas tu peux ajouter {overflow:hidden} afin qu'il respecte la hauteur de 12px.

PS: souhaites-tu qu'on supprime l'autre sujet ?

mpop a écrit :

Au passage, sous Firefox ta page fait juste un pixel de plus que ce qui est nécessaire. Cela fait apparaître une barre de défilement active, alors qu'il n'y a qu'un malheureux pixel à faire défiler. C'est assez perturbant, du point de vue de l'ergonomie.

Je sais pas si j'ai bien compris : une barre de defilement verticale ou horizontale ? Quel est ta resolution ?

Sinon oui je suis conscient que j'essai de faire un design au pixel pret mais j'aimerai au moins que ca marche avec IE6 et FF, le reste c'et pas tres important. SI j'y arrive pas je serai obligé de tout faire en flash =)

Pour l'autre sujet je ne sais pas si vous avez regardé, mais laissez le ouvert, si j'ai une solution la bas je mettrai resolu, car je sens qu'avec les CSS je risque d'etre bloqué.

Merci, je vais essayer overflow:hidden.

ca marche nickel overflow:hidden =)

mais bon, pourquoi les autres div ne sont pas décalés plus haut ?
IE ne gere pasl es petites valeurs ? mais le div le plus haut ne fait que 8px et il ne rajoute pas de pixel en trop !

Si vous passez par la eclaircissez ma lanterne sinon c'est pas grave.

Je vais mettre [Resolu] dans le titre de ce sujet et en ouvrir surement un autre avec la nuit blanche que je passerai ce soir !! =)))

Merci !
Modifié par astronaute (02 Jul 2006 - 18:58)

astronaute a écrit :
Je sais pas si j'ai bien compris : une barre de defilement verticale ou horizontale ? Quel est ta resolution ?

Je suis en 1280×1024, et il s'agit d'une barre de défilement vertical.

astronaute a écrit :
mais le div le plus haut ne fait que 8px et il ne rajoute pas de pixel en trop !

Oui mais c'est différend puisque tu ne lui spécifies aucune hauteur et qu'il va simplement prendre celle de l'image.

Tiens, en passant : Balise <img> ou feuille de style ?.

Sous IE7, 1280*1024 : aucune barre de défilement.
Le site prend 100% de la largeur et environ 90% de la hauteur, une cinquantaine de pixels blancs de hauteur dans le bas.