[Résolu] - Eléments dans une DIV ne défilent pas avec la scrollbar

Bonjour

C'est un site encore en création, il tourne sous Joomla, la structure est réellement hors du commun (c'est pas moi qui choisis). C'est un bloc dans lequel il y a une div à hauteur fixe qui contient le "contenu", uns scrollbar apparait donc lorsque le contenu est plus long que son contenant.

Dans ce div, par moments il y a un module qui présente des images alternatives. Le problème est que ce(s) module(s) ne défilent pas avec le reste du texte quand je descends la scrollbar.
Ce 'bug' se pose sur IE6 et IE7.

Pour mieux vous faire une idée du problème, c'est sur cette page

Je suis paumé sur cette histoire. Pouvez-vous me donner une piste svp ?
Merci
Modifié par miltonis (23 Mar 2010 - 11:09)

Bonjour,

Je pense que le problème vient du mélange de overflow hidden et de position absolute.

Par contre : valide ton code !

Là c'est la pagaille (que fait une balise style hors du head ?). Il sera plus facile de trouver le problème avec un code valide.

Bonjour Laurie-Anne,
La validation totale du code était prévue pour la fin... Il faut dire que les applications destinées à Joomla sont parfois bien laxistes.
Voilà, j'ai validé le code pour la page concernée

J'ai en effet remplacé la "position:absolute par relative" et masqué le "overflow:hidden" sans un meilleur résultat. 'comprends pas trop là!
Le code CSS d'origine pour le module en question est celui-ci :

ul.briask-iss {position:relative;list-style:none;list-style-image:none;margin:0px auto;padding:0px;overflow:hidden;border:none;background:none;}
ul.briask-iss li {list-style:none;margin:0px;padding:0px;border:none;background:none;}
ul.briask-iss li a {margin:0px;padding:0px;border:none;background:none;}
ul.briask-iss li a img {display:none;position:absolute;padding:0px;top:0;left:0;border:none;background:none;}
ul.briask-iss li img {display:none;position:absolute;top:0;padding:0px;left:0;border:none;background:none;}

J'ai testé la page sur IE8 et là, ça fonctionne bien, étrange non ?
Modifié par miltonis (19 Mar 2010 - 17:35)

Salut

En essayant de comprendre ce qui se passe j'ai compris que c'est bien la liste <ul> qui ne défile pas sous IE et non les images seulement.
Le seul moment où la liste "réagit" aux mouvements de la scrollbar, c'est quand je mets : "position: relative" à l'élément <ul>. Mais bien sûr, du coup les images n'apparaissent pas à leur place...

Je me demande si la piste de "overflow + position" est bonne car je retourne le problème dans tous les sens mais je n'arrive pas à avancer réellement. Help svp !

Merci

Bonjour,

Je me permets de relancer le sujet car j'ai beau étudier la question je tourne en rond et je deviens dingo!
La page sur laquelle se pose le problème avec IE6 et IE7 est celle-ci (validée W3C)

un petit coup de main svp...
Modifié par miltonis (19 Mar 2010 - 17:35)

Je continue tout seul (pour l'instant j'espère )

Vu que le contenu de la page est dans une DIV "scrollable" en vertical, si je mets overflow-y:hidden, le problème ne se pose plus. Il semble que le problème vient de là, mais mon patron exige cette div scrollable...

Il doit y avoir une solution et toute aide est toujours la bienvenue !

Il fallait en fait remonter bien plus "haut" que les divs concernées et attribuer un position:relative au bloc conteneur. Fallait y penser...
C'est un bug d'IE6 et 7 qui apparait lorsqu'un élément positionné en relatif ou absolue (ici .briask-iss), se trouve à l'intérieur d'un élément doté d'un overflow:auto ou scroll (ici #contenuTexte_interne).
Le position:relative sur le conteneur en overflow:auto/scroll permet de corriger ce bug.

Solution trouvée dans ce forum css
Modifié par miltonis (23 Mar 2010 - 11:09)