28220 sujets

CSS et mise en forme, CSS3

Décalage d'un pixel au redimensionnement sous Internet Explorer

Salut tout le monde, je dois faire face à un bug complétement débile, normal c'est un bug de IE...

Alors je vous explique le truc :
J'ai ma page de structure classique, <body>, <div id="conteneur">, ...,
je donne une image de fond au body centrée et répétée verticalement, donc tout le long de la page. J'ai une largeur fixe à la division conteneuse.
J'ai un <h1> sans marges dans la div, je lui met une image de fond, et sous IE en plein écran j'ai un décalage de 1px vers la gauche, et en pas plein écran, c'est normal... (sous firefox tout est nickel)

Donc allez comprendre pourquoi...

J'ai centré ma page avec les marges auto, ou avec le positionement absolu, même résultat.

Pour info la page fait 650px de large.

La seule solution que j'ai trouvée, c'est de mettre le background dans le conteneur et d'utiliser min-height: 100%; sur le conteneur (avec les techniques qui vont bien pour IE/firefox)

Et là ça marche impec...

Si vous aviez une piste ...
Euh... wé, je fais un "design" personalisé parceque les tests effectués ne sont pas sur ma page et le proprio à pas forcément envie de voir étaler ses créa partout Smiley cligne

Je met un lien dès que c'est fait
Voilà un exemple en ligne :
http://www.elmoustikoblog.net/divers/test_bug_1px/index.html
http://www.elmoustikoblog.net/divers/test_bug_1px/style.css
(height: 100% pas de bug)
http://www.elmoustikoblog.net/divers/test_bug_1px/index2.html
http://www.elmoustikoblog.net/divers/test_bug_1px/style2.css
(centrage marges auto bug)
http://www.elmoustikoblog.net/divers/test_bug_1px/index3.html
http://www.elmoustikoblog.net/divers/test_bug_1px/style3.css
(centrage position absolue bug)

Voilà, donc quelque soit la soution sous firefox, pas de problème, sous IE la premiere solution fonctionne mais est plutot lourde d'implémentation pour ce que c'est faire, et les 2 autres (moins brutales) ont le bug décalage de 1px vers la gauche (le header) lorsque la fenetre est en plein écran.
Même si en théorie <h1> se suffis à lui-même, je tenterais de placer <h1> dans un <div id="header"> avec :

#header { 
   background: url(titre.png) no-repeat; 
   width: value; /* la largeur de l'image */
   height: value; /* la hauteur de l'image */
   padding: 0; 
   margin: 0; 
}


Dommage parce que là je suis sur un poste public donc pas très équiper pour faire des test...
Modifié le 09 Dec 2004 - 22:04
J'ai testé avec ajout de div... idem, et en suprimant les styles du lien et du span, et même problème...

A mon avis, on y peut rien... c'est quand même pas croyable...
Là j'ai accès à deux postes publics. Sur l'un, le bug se présente comme décrit, mais sur l'autre, en théorie avec la même configuration, pas de bug dans aucun de tes exemples. De ce que je peux constater vu d'ici, ce n'est pas le header qui est décalé vers la gauche, mais le conteneur qui part à droite.
Stephan a écrit :

Essais avec : 

   background-attachment: fixed;

Et donnes-moi des news ! Smiley cligne


Tu as probablement fait le test sur ton h1#header. Essais maintenant avec body : 

body { 
   background-attachment: fixed; 
}

<edit>
Ça marche pas, je viens de tester.
</edit>
Modifié le 10 Dec 2004 - 02:41
Si tu appliques ton background à ton div#conteneur, ça règle le problème.

div#conteneur
{
	width: 650px ;
	margin: 0 auto ;
	text-align: left ;
	background: #eee url(fond.png) repeat-y 50% 0 ;
}


<edit>
Je suis bête, c'est ce que tu as fait en premier !
</edit> Smiley decu
Modifié le 10 Dec 2004 - 03:08
Après avoir réduit le HTML à :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Test bug 1px</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Language" content="fr" />
<style type="text/css" media="screen">
@import url(style.css);
</style>
</head>
<body>
<h1 id="header">Title</h1>
</body>
</html>

Et le CSS à :

body { 
   background: #eeeeee url(fond.png) repeat-y 50% 0; 
   text-align: center; 
   margin: 0; 
}

h1 { 
   background: url(titre.png) no-repeat; 
   width: 650px; 
   height: 200px; 
}


J'en suis venu à la conclusion que le "BUG" ne pouvait venir que des images.

Ton "fond.png" a 1px blanc à droite !!! Smiley grrr

connerie, connerie, connerie... Smiley rofl Smiley err Smiley lolol Smiley nut Smiley eyecrazy
Moi aussi je me demande pourquoi c'est beau sur Firefox. Mais toujours est-il que le problème vient de la différence dans les tonalités de "titre.png" et "fond.png". Smiley ohwell

Ah ! Bien sûr, IE ne gère pas bien la transparence des png, ce qui expliquerait la différence de rendu. Smiley youpi

Ça explique tout non ? Smiley lol
Modifié le 10 Dec 2004 - 04:32
Non, rien à voir avec les images, j'ai testé différents trucs, et là il n'y a pas de transparence...
Je n'ai pas non plus de pixel blanc sur mon image...

A mon avis, c'est vraiment un bug d'IE et qu'on ne peut pas tellement régler... heureusement que j'ai une alternative, mais c'est loin d'être parfait Smiley confus

Merci de ton aide en tout cas Smiley cligne
Modifié le 10 Dec 2004 - 09:06
Maintenant ça me revient !

Si tu regardes mon site en signature, j'utilise un background sur body et un autre sur le header. Mon conteneur a 700px. Si on compare IE et Firefox, on voit la différence de 1px.

Pour contourner le problème, j'ai fait une image de 718px. La bordure gauche est à -1px du conteneur ce qui fait flush dans IE et une mince couleur à l'intérieur du conteneur dans Firefox. Tu me suis ?
Mon image (hackée) :
http://www2.csduroy.qc.ca/mdc/images/bodyback.gif

Si tu regardes l'image en détail, tu verras que la zone centrale (#e1ceaa) fait exactement 701px. Smiley lol

Nondidju j'ai eu ce problème mais je ne me rappellais plus !

Je trouve que la solution de l'image plus large en background sauve beaucoup de codes, et pas besoin de hack.

Ah ! Et puis c'est là qu'il faut un : 

body { 
   background-attachment: fixed; 
}

parce que sinon, le background fout le camp dans Netscape.

Cette solution fonctionne également sur Mac IE, Firefox, Opera, Safari et Netscape.

J'espère que là on y est ! Smiley lol
Modifié le 10 Dec 2004 - 19:01
Oups, c'est parti un peu aux oubliettes mon histoires, désolé de pas avoir répondu... je test ça ce week end, je pense, merci Smiley cligne
Sujet clos
Aller à