Webmaster Hub > background-attachment:fixed dans IE...

Version complète: sur le forum Webmaster Hub : background-attachment:fixed dans IE...

Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS

Kreestal

mercredi 18 janvier 2006 à 18:53

Bonsoir à tous! :-)

Je me tourne une fois de plus vers les utilisateurs du Hub pour m'aider à fixer un problème que j'ai.

La page où se pose le problème dans MSIE: http://www.aenemya.com/lookie.htm

>> Dans Internet Explorer en effet, l'image de fond de la div #contenu, "pink.jpg", n'est pas fixée; du coup, quand le texte est plus long que la hauteur de l'image, IE fait défiler la div et son image d'arrière-plan avec elle. Dans l'autre navigateur que j'utilise, Mozilla Firefox, ce problème n'existe pas: l'image d'arrière-plan est bien fixée.

D'où deux questions:
1 - existe-t-il une solution pour fixer cette image d'arrière-plan dans IE?
2 - Le même problème se pose-t-il dans d'autres navigateurs, et si oui, lesquels? Existe-t-il une solution pour chaque problème?

A propos de la question 1, je viens de trouver un article sur le Web qui m'inquiète un peu:

CITATION

Positionnement fixe d'images de fond

* IE pour Windows ne sait pas interpréter le background-attachment:fixed sur autres balises que la balise <body> (corps de page).

On ne peut donc pas fixer à l'écran la position d'un fond autre que celui qui est contenu dans cette balise-là.
Cela limite à 1 le nombre de fonds immobilisés qu'il est possible de voir dans IE.

Source: http://www.christopher-jablonski.com/fr/reperes/ie6.shtml

D'avance merci pour votre aide.

MarvinLeRouge

mercredi 18 janvier 2006 à 20:11

ceci fera peut-être ton affaire.

Ceci dit, à mon avis, le problème a déjà été évoque ici.

Kreestal

mercredi 18 janvier 2006 à 20:21

CITATION(MarvinLeRouge @ mercredi 18 janvier 2006, 20h11)

ceci fera peut-être ton affaire.

Bonsoir Marvin,

Merci pour ta réponse! ;-)
Malheureusement, la solution que tu proposes ne donne pas vraiment le résultat escompté; je te renvoie au résultat, avec script, ici: http://www.aenemya.com/lookie2.htm (à voir avec MSIE bien sûr): non seulement l'image d'arrière-plan dont il est question n'est pas fixée, mais le défilement permet toujours de voir l'arrière-plan quand l'image "s'arrête", et en plus chez moi je vois une bande blanche étrange qui apparaît comme par magie à droite...

Ne s'agirait-il pas d'une question d'overflow:auto, ou un rapport avec le min-height? Argh, j'avoue que je n'en sais rien

CITATION

Ceci dit, à mon avis, le problème a déjà été évoque ici.

J'ai fait des recherches, mais je n'ai rien trouvé (ou alors j'utilise les mauvais mots clefs) -- aurais-tu d'autres liens à me proposer?

v4np13

mercredi 18 janvier 2006 à 20:41

Pourquoi n'utilises-tu pas une image de 1px de haut que tu répete dans le sens de la hauteur (en passant par le CSS)? Le chargement du site sera moins long

Kreestal

mercredi 18 janvier 2006 à 20:44

CITATION(v4np13 @ mercredi 18 janvier 2006, 20h41)

Pourquoi n'utilises-tu pas une image de 1px de haut que tu répete dans le sens de la hauteur (en passant par le CSS)? Le chargement du site sera moins long

Oui, cela fonctionnerait si mon image de fond était unie - mais ce n'est pas le cas! Comme il s'agit du squelette de mon portfolio, l'image d'arrière-plan consituera un vrai design, avec un paysage et une nana. L'image donnée sur lookie.htm est juste un exemple, pour vous montrer le problème ^_^

Dudu

mercredi 18 janvier 2006 à 20:50

Salut

Malheureusement aucune solution de contournement ne se révèle vraiment propre, donc vraiment efficace.

Et sinon, je confirme Internet Explorer pour Windows n'est pas en mesure de gérer la valeur "fixed" de l'attribut "background-attachment" en CSS 2.
Ce n'est pourtant pas le nombre de pétitions à Microsoft qui manque (si çà se trouve, c'est peut-être quelque chose de très difficile à coder pour les ingénieurs de Microsoft)

La seule solution que je vois est la solution de facilité: ne plus coder quoi que ce soit en fonction de MSIE tant que celui-ci ne daignera pas évoluer un minimum.
C'est triste à dire, c'est parfois compliqué à gérer lorsqu'on doit faire des sites pour des clients lambda qui utilisent le premier navigateur venu sur le premier OS venu (donc IE sous Windows), mais dès fois il n'y a pas vraiment d'autre solution..

deathruct

mercredi 18 janvier 2006 à 21:17

Essaye de voir avec ça http://batraciens.net/css-astuces/zone-fixe-1.htm

Ca devrait pouvoir t'aider

Kreestal

mercredi 18 janvier 2006 à 22:00

CITATION(deathruct @ mercredi 18 janvier 2006, 21h17)

Essaye de voir avec ça http://batraciens.net/css-astuces/zone-fixe-1.htm

Ca devrait pouvoir t'aider

HOURRAH!!! Grâce à ton lien, et plus précisément grâce à celui-là, j'ai atteint mon objectif!! Merci Deathruct!!! :up:

Voir le résultat ici: http://www.aenemya.com/lookie.htm

Ce qui a changé: j'ai supprimé l'image de fond de la div qui posait problème, à savoir #contenu. Parallèlement, j'ai indiqué une image d'arrière-plan dans <body>, en indiquant ses coordonnées, pour qu'elle soit bien positionnée par rapport à la div #menu qui fait 201px de large:

CODE

background: 201px 0 url(images/pink.jpg) no-repeat fixed;

Et voilà!

CITATION(Dudu @ mercredi 18 janvier 2006, 20h50)

La seule solution que je vois est la solution de facilité: ne plus coder quoi que ce soit en fonction de MSIE tant que celui-ci ne daignera pas évoluer un minimum.
C'est triste à dire, c'est parfois compliqué à gérer lorsqu'on doit faire des sites pour des clients lambda qui utilisent le premier navigateur venu sur le premier OS venu (donc IE sous Windows), mais dès fois il n'y a pas vraiment d'autre solution..

Salut Dudu,

Argh, quand j'ai lu cette réponse, j'étais vraiment découragée -- toutefois, l'espoir était encore là, bien caché certes, mais bien là!

Cela dit, sur le principe je suis d'accord: s'il n'y a vraiment aucune solution à un problème dans IE (ou dans un autre navigateur, mais il semble que IE gagne presque à tous les coups la palme du navigateur le plus chiant), il faut laisser tomber, de toute façon on n'a pas vraiment le choix... Raison de plus si le site sur lequel on travaille fonctionne dans la plupart des autres navigateurs que celui qui pose problème.

Mais c'est quand même bien lourd, car il y a encore un paquet d'internautes qui utilisent IE, et pas vraiment par choix: je ne compte plus le nombre de personnes dans mon entourage qui, bien qu'internautes réguliers, ignorent presque qu'il y a d'autres navigateurs qu'IE!...

Bon, alors admettons que ce n'est pas de leur faute; après tout, moi aussi j'ignorais l'existence de ce fabuleux navigateur qu'est Mozilla avant qu'on m'en fasse l'éloge. C'est alors au webmaster de s'adapter, de créer des sites le plus compatible possible avec tous les navigateurs. Donc, si on abandonne faute de mieux, en tant que webmaster on sera forcément montré du doigt (certes, surtout par les autres webmasters qui ont réussi là où on a échoué; mais aussi par les quelques internautes zélés qui vous enverront un email pour récapituler tout ce qui ne fonctionne pas dans votre site -- ça m'est arrivé); et quand bien même, je ne trouve pas que ce soit une sensation très agréable que de mettre en ligne un site que l'on sait, au fond de soi, médiocre, car justement, imparfait... (ou peut-être suis-je trop dure avec moi-même?)

Quand je parcours les sujets du Hub, d'Alsacréations, et de tous les sites dont on parle ici et là, compilations d'astuces CSS redoutables, hacks défiant la logique la plus mathématique, etc, je me dis que dans tous les cas, il y a forcément un petit malin ou une petite maligne qui aura THE solution à un problème quelconque... Mon côté optimiste peut-être

Dudu

mercredi 18 janvier 2006 à 22:34

Bien sûr qu'il faut chercher l'accessibilité avec tous les navigateurs (même les plus nuls)

..

.. mais à quel prix

Voilà ce que je vois sur batraciens.net:
- utiliser "overflow-y: hidden"
- mais alors dans ce cas utiliser aussi "html>body: overflow:auto" pour les autres (jusque là c'est un hack normal)
- sauf que du coup plus rien ne marche dans Firefox et Opera (ni dans Safari d'ailleurs) donc "body>.menu1 {position:fixed}"
- et avec une DTD correcte çà ne marchera plus dans IE, donc il faut en plus mettre la DTD en commentaires (

)

Il y aussi d'autres solution à base de règles CSS propriétaires IE comme "expression". Mais ni celle-ci ni celle de batraciens.net ne sont ce que je qualifierais de code pérenne. Sachant que Microsoft promet -à tort ou à raison- de tout bousculer pour IE7 on ne sait pas trop finalement ce que rendra ce type de "hacks" d'ici une ou deux années.

Quant aux (encore trop) nombreux utilisateurs d'IE Win, ils seraient moins nombreux si les webmasters ne perdaient pas 2 heures de leur temps à chaque fois qu'IE Win ne sait pas gérer une propriété: c'est ce ce qu'on appelle un cercle vicieux

Ensuite chacun fait comme il l'entend, tant mieux si çà marche pour le moment.
A+

PS: est-ce normal si toute la page est violette avec Safari ?

Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.