IE6 réagit mal à un fond mis dans le "conteneur"

Bonjour.
Est-il déconseillé de mettre une image de fond dans le "div conteneur" (le div placé juste après "body" et dont la fin se situe juste avant "/body", comme montré dans le livre de Raphaël Goetter) ? En effet, j'y ai placé une image en fond avec répétition verticale ; tout se passe bien dans Firefox (normal ), mais rien ne va plus dans IE6 : quand on utilise l'ascenseur pour parcourir la page, le fond coloré et les bordures du... "div 'pied-de-page'" (va savoir pourquoi) se diffuse dans les parties qui n'apparaissaient pas initialement à l'écran lors de l'affichage de départ de la page !!! C'est d'un vilain !
Sitôt l'image de fond supprimée, tout rentre dans l'ordre...
Problème connu ?
Merci pour toute réponse.

Bonjour, pourrais-tu faire une saisie d'écran de ce phénomène métaphysique s'il te plait ?

Salut,

Une page en ligne avec l'image active, pour constater nous même, car tes explications sont peu claires.

Enfin tu peux tout à fait mettre une image de fond à ton div conteneur, çà doit fonctionner sans soucis. Ton problème doit venir d'autre chose je pense.

Merci pour la rapidité de vos réponses.

Voici la page mise en ligne : http://fifracol.free.fr/Temp/Modele01.htm

========EDIT==============

Je crois avoir trouvé d'où vient la difficulté. J'ai mis au tout début du "div conteneur" le code suivant

<a name="top"></a>nbsp;

pour permettre le retour au sommet de la page en cliquant sur un lien en bas de page. IE6 n'aime pas ça du tout ! ==> une fois ce code supprimé le problème n'existe plus. La suppression de l'espace insécable ne change rien ; il n'y a qu'en plaçant l'ancre devant le premier titre, semble-t-il, que ça fonctionne, mais alors on ne remonte pas au sommet de la page... J'ai essayé de supprimer complètement l'ancre ; IE6 fait remonter la page au sommet, mais pas Firefox car, du coup, le lien pointant vers l'ancre est mort (enfin, je suppose que c'est la raison)...

Comment faites-vous pour renvoyer le visiteur d'une page au sommet de cette dernière, c'est à dire tout en haut en haut (pas à la première ligne de texte ou à la première image) ? -- C'est très très bête, mais je ne trouve pas (débutant oblige !). Jusqu'à maintenant, je mettais le code "ancre + espace insécable" (comme dit au début), mais je n'avais pas essayé la mise en place d'un fond dans le conteneur !
Modifié par Piteur511 (07 Jun 2007 - 11:48)

ReBonjour, Pour envoyer à un endroit précis de la page, fais un lien vers un élément identifié, par exemple ton div à l'Id conteneur. Tout lien a href="#conteneur" renverra donc à cet élément, plus besoin d'ancres nommées pas belles et encombrantes

ousp, si c'est tout en haut, tu peux nommer le body, (body id="top") mais ce n'est pas recommandé par certains recommandeurs, le premier élément de ta page s'il est tout en haut, ou alors placer un div qui englobe vraiment tout div id="top" ?
Modifié par GrOlivier (07 Jun 2007 - 13:55)

En gardant le code de la première page, le problème disparait également si je supprime le positionnement relatif de div#conteneur.

GrOlivier a écrit :
ReBonjour, Pour envoyer à un endroit précis de la page, fais un lien vers un élément identifié, par exemple ton div à l'Id conteneur. Tout lien a href="#conteneur" renverra donc à cet élément, plus besoin d'ancres nommées pas belles et encombrantes

Moi qui me demandais pourquoi on utilisait le "dièse" comme pour les ancres, je viens d'avoir la réponse : un id peut servir d'ancre ! Bonne nouvelle ! Merci beaucoup.

GrOlivier a écrit :
ousp, si c'est tout en haut, tu peux nommer le body, body id="top") mais ce n'est pas recommandé par certains recommandeurs, le premier élément de ta page s'il est tout en haut, ou alors placer un div qui englobe vraiment tout div id="top" ?

Bien compris, mais effectivement, mon div englobant s'appelant "conteneur", pourquoi ne pas l'utiliser tel quel ? A l'avenir, pourquoi ne pas appeler l'englobant "top", en effet...

Florent V. a écrit :
En gardant le code de la première page, le problème disparait également si je supprime le positionnement relatif de div#conteneur.

Ne faut-il pas, pour positionner quelque chose au sein d'un div, que ce dernier soit lui-même positionné ? Il m'est arrivé de placer un div 'float' dans un div que j'avais oublié de positionner : le div en float n'apparaissait tout simplement pas dans IE6...

Piteur511 a écrit :
Moi qui me demandais pourquoi on utilisait le "dièse" comme pour les ancres, je viens d'avoir la réponse : un id peut servir d'ancre ! Bonne nouvelle ! Merci beaucoup.

Pour diverses raisons que je ne détaille pas ici, les ancres les plus compatibles avec les navigateurs chiants (qui a dit IE ?) ressembleront plutôt à cela :

<a href="#" id="ancre" name="ancre"></a>

Mais c'est effectivement possible d'utiliser uniquement l'attribut id. C'est juste moins compatible avec un certain navigateur.

Piteur511 a écrit :
Ne faut-il pas, pour positionner quelque chose au sein d'un div, que ce dernier soit lui-même positionné ?

Non. Il faut positionner un bloc pour qu'il serve de référent pour le positionnement absolu de ses enfants ou descendants. Pas pour le reste (notamment le positionnement flottant).

Piteur511 a écrit :
Il m'est arrivé de placer un div 'float' dans un div que j'avais oublié de positionner : le div en float n'apparaissait tout simplement pas dans IE6...

Il se peut que le position: relative ait corrigé un tel bug d'IE6, mais c'était un effet secondaire. De même qu'ici tu as l'apparition d'un conteneur fantôme avec une bordure grâce (en partie) au position: relative. Un coup ça aide, un coup non.

a écrit :
ReBonjour, Pour envoyer à un endroit précis de la page, fais un lien vers un élément identifié, par exemple ton div à l'Id conteneur. Tout lien a href="#conteneur" renverra donc à cet élément, plus besoin d'ancres nommées pas belles et encombrantes

Hé bien justement non, je ne retrouve plus la discussion sur le forum mais JPV l'avait déconseillé car cela peux poser différents problèmes.

knarf a écrit :
Hé bien justement non, je ne retrouve plus la discussion sur le forum mais JPV l'avait déconseillé car cela peux poser différents problèmes.

Flûte, le gâcheur de ma joie que tu fais là, Knarf . Je croyais avoir trouvé une solution pour mon problème de retour au sommet de la page, et voilà que tu me fais déchanter ! Donc, selon toi, il faut continuer à utiliser les ancres du type

<a name="top"></a>

et ne pas pointer vers un div identifié par id="..." ? Pourrais-tu être plus précis, s'il te plaît ? Et me dire, dans ce cas, comment tu fais pour renvoyer le visiteur vers le haut de la page, sachant que, dans ma page, ça me fiche le bazar quand est utilisé IE6 ?...

Merci !

Piteur511 a écrit :
Donc, selon toi, il faut continuer à utiliser les ancres du type

<a name="top"></a>

et ne pas pointer vers un div identifié par id="..." ?

Oui, utiliser la forme que j'ai proposée dans mon message ci-dessus. Elle provient d'un article de Jean-Pierre Villain sur les liens d'évitement.

Piteur511 a écrit :
sachant que, dans ma page, ça me fiche le bazar quand est utilisé IE6 ?...

Ça n'est pas tellement l'ancre qui fiche le bazar que le positionnement relatif, il me semble. Donc : virer le positionnement relatif superflu.

Faites boucler l'ancre vers elle-même, pour neutraliser les dommages collatéraux sur l'accessibilité.

Sinon, on peut très bien revenir aux id, mais leur gestion dans IE est effectivement un peu complexe.

Florent V. a écrit :
Ça n'est pas tellement l'ancre qui fiche le bazar que le positionnement relatif, il me semble. Donc : virer le positionnement relatif superflu.

Disons la combinaison des deux : l'un sans l'autre, pas de problème.

Ce qui m'amène à la question suivante : si l'on est obligé de positionner le conteneur (en raison d'un positionnement absolu d'un div contenu), comment faire ?

Donc, si j'ai tout compris, il faut écrire, pour pointer vers "top" placé complètement au sommet de la page,

<body>
<a href="#" id="top" name="top"></a>
<div id="conteneur">
...
<a href="#top">Haut de la page</a>
</div>
</body>

Cela dit, j'aimerais bien comprendre la première partie (href="#"), que je n'ai jamais utilisée pour ma part qu'avec des onclick JAVASCRIPT, donc avec quelque chose entre <a> et </a> (et encore, pas de manière heureuse, puisque ça provoque la remontée de la page au sommet avec IE6 -- mais pas avec Firefox qui considère le lien comme mort et ne daigne pas faire le moindre déplacement -- tant mieux !)

Laurent Denis a écrit :
Faites boucler l'ancre vers elle-même, pour neutraliser les dommages collatéraux sur l'accessibilité.

Pour le coup, désolé : je ne comprends pas...
Modifié par Piteur511 (07 Jun 2007 - 22:34)

Laurent Denis a écrit :
Faites boucler l'ancre vers elle-même

Donc comme ceci, si je ne m'abuse :

<a href="#ancre" id="ancre" name="ancre"></a>

Laurent Denis a écrit :
pour neutraliser les dommages collatéraux sur l'accessibilité

Par curiosité, qu'est-ce qui pose problème avec le href="#" ? L'ancre sera considérée comme un lien actif dans certains navigateurs, et ramènera en début de document ?
(Après test, il semblerait que oui.)

Si c'est problématique, ne faudrait-il pas corriger le passage suivant dans l'article de Jean-Pierre ?

Piteur511 a écrit :
Ce qui m'amène à la question suivante : si l'on est obligé de positionner le conteneur

Tu n'es pas obligé de positionner tous les conteneurs (vu que tu en a plusieurs...). Notamment, tu n'est pas obligé de positionner div#conteneur, vu que div#corps est déjà positionné en relatif.

Pour rappel, je pars de ton fichier Modele01.html, structuré ainsi :

<body vlink="#993399" link="#000099" alink="#ff0000">
	<div id="conteneur">
		<a name="top"></a>
		<div id="corps">
			...
		</div>
	</div>
</body>

Le div#conteneur porte des styles qui pourraient tout aussi simplement être attribués à body. On pourrait donc faire ceci :

<body>
	<a href="#top" name="top" id="top"></a>
	<div id="corps">
		...
	</div>
</body>

(Au passage, on aura intérêt à définir les styles pour les liens directement dans la feuille de style CSS.)

Ou encore :

<body>
	<div id="corps">
		<a href="#top" name="top" id="top"></a>
		...
	</div>
</body>

Merci pour tes conseils et infos, Florent V.

J'ai un peu modifié le 'modele2' ; depuis se produit un curieux phénomène dans IE6 quand on clique sur l'image de retour vers le haut de la page (la plume) :
- la première fois que la page remonte réellement, rien de particulier à noter.
- la seconde fois, la page étant remontée au maximum, le clic sur l'image fait que le fond se tronque tout en haut !

J'ai bien compris que cela venait du padding supérieur du div conteneur, mais comment faire autrement pour qu'il y ait conservation de la "marge" de 20 px au sommet de la page ?

======EDIT===========

Faute d'autres solutions suggérées, j'ai "commis" ce qui est peut-être une hérésie : j'ai supprimé le padding supérieur de 20px à l'origine du bug dans IE6 et ai ajouté un <div> de 20px de haut au sommet de la page, un <div> vide bien évidemment... Ça fonctionne désormais.
Modifié par Piteur511 (09 Jun 2007 - 09:05)

GrOlivier a écrit :
Pour envoyer à un endroit précis de la page, fais un lien vers un élément identifié, par exemple ton div à l'Id conteneur. Tout lien a href="#conteneur" renverra donc à cet élément, plus besoin d'ancres nommées pas belles et encombrantes.

Si c'est tout en haut, tu peux nommer le body, (body id="top") mais ce n'est pas recommandé par certains recommandeurs, le premier élément de ta page s'il est tout en haut, ou alors placer un div qui englobe vraiment tout div id="top" ?

C'est bien

<body id="haut">
...
<a href="#haut">Retour en haut de page</a>

... que propose p211 Raphaël Goetter dans son livre "CSS2, pratique du design web (Eyrolles)"... non sans préciser, il est vrai, que c'est une syntaxe propre aux versions strictes de HTML et XHTML...

Alors ? Querelle de chapelles ?

Piteur511 a écrit :
C'est bien

<body id="haut">
...
<a href="#haut">Retour en haut de page</a>

... que propose p211 Raphaël Goetter dans son livre "CSS2, pratique du design web (Eyrolles)"

Oui, et si ça n'est pas déjà corrigé (ou plutôt : affiné) dans la deuxième édition, ça le sera dans la troisième.

Le livre de Raphaël est une source d'information, et même s'il est globalement fiable aucune source d'information ne peut être suivi aveuglément.

Si tu dois retenir un type d'ancre et un seul, retiens plutôt celui-ci :

<a href="#ancre" id="ancre" name="ancre"></a>

Bien noté. Mais dans IE6, comme dit dans un message plus haut, ça me provoque un petit bug esthétique que, comme dit dans un message plus haut plus récent, j'ai dû contourner par un <div> vide... Alors que la formule <body id="top"> ne provoquait aucun problème avec IE6 (mais avec d'autres navigateurs peut-être, ce que j'ignore)...
Modifié par Piteur511 (11 Jun 2007 - 11:56)