Div contenu et IE

Bonjour à tous,

En fait voilà, j'ai créé pour un site une sorte de "zone de défilement" pour des miniatures photos (je sais pas trop comment expliquer).

Il s'agit d'un div contenant (avec des dimensions précises et un overflow:hidden) et un div contenu (de même hauteur mais plus large et contenant les miniatures) le tout avec une scrollbar en javascript (grâce à scriptaculous) qui modifie la position (horizontale) du div contenu pour le faire défiler.

Mon problème est que cela ne marche pas avec Internet Explorer (alors que c'est nickel sous safari et Firefox) : le div contenu défile bien mais "dépasse" du div contenant comme si celui-ci n'existait pas.
Si vous avez une idée pour résoudre mon problème vous m'aideriez énormément parce que cela fait un moment que je suis bloqué et je n'ai rien trouvé sur le net.

Merci

Val

Bonjour Val.G,

Tu devrais peut-être poster un lien ou un bout de code

Bonjour, il est vrai que ce serait plus clair avec le code en question, donc le voici

//div contenant
<div style="width:700px;overflow:hidden;">
//div contenu
<div id="galerie" style="position:relative;left:0px;width:20000px;height:100px;text-align:left;">
<br />
//code php pour afficher les miniatures
<?php
for ($i=1; $i<60; $i++) {
echo '<a href="#" onclick="new Ajax.Updater(\'contentphoto\',\'img.php?page=asm&num=';
echo $i;
echo '\',{evalScripts:true});"><img height="80" src="/mini/asm/asm';
echo $i;
echo 'min.jpg" alt="" /></a>';
}
?>
</div>
</div>

Voilà, j'espère que c'est plus clair et que vous pourrez m'aider.

Val

Val.G a écrit :
Bonjour, il est vrai que ce serait plus clair avec le code en question, donc le voici

Je doute que le code envoyé aux navigateurs soit le code PHP que tu présentes.

Pour un problème de rendu, ce sont essentiellement le code HTML et le code CSS qui sont concernés. Une page en ligne (page du site ou page de test mise en ligne pour l'occasion) est le meilleur moyen d'y accéder, mais à défaut tu peux toujours indiquer le code HTML et CSS pertinent sur le forum.

Ce n'est pas le code php qui pose problème (ce n'est que du contenu) : ce sont les deux div que j'ai indiqué (avec leur style css) :

//div contenant
<div style="width:700px;overflow:hidden;">

//div contenu
<div id="galerie" style="position:relative;left:0px;width:20000px;height:100px;text-align:left;">

contenu

</div>
</div>

Et pour la page de test, la voici page, il suffit d'aller sur la première gallerie avec IE pour voir le problème (il n'y a pas de lien direct, désolé).

Val

Il n'y a pas de page dédiée pour chaque galerie, uniquement un accès via Javascript/Ajax? C'est regrettable (pas de possibilité de revenir en arrière... où est le lien pour revenir à la page d'accueil, d'ailleurs?).

De plus, je signale en passant:
- que la jolie barre de défilement en Javascript pose un sérieux problème d'ergonomie: comment l'utilisateur est-il censé savoir du premier coup d'oeil qu'il s'agit d'une barre de défilement?
- que le script pour la barre de défilement ne fonctionne pas sous Opera.

Pour le problème avec IE... là, ça me dépasse. Il faut dire aussi que faire des tests sur ces pages inexistantes (merci Ajax...), c'est pas évident.

A propos de mon site :
Je connais ces problèmes d'accessibilité, mais le fait est que ce site est dédié à la promo de la classe, que les utilisateurs seront peu nombreux (40), qu'ils utilisent firefox ou IE. De plus leur ayant déjà fait tester, je n'ai eu aucun retour sur un quelconque problème d'utilisation.
Enfin, ce site n'ayant pas la vocation d'être un site mondialement connu, il m'a servi de prétexte pour essayer de faire un peu d'ajax et de tester scriptaculous.

PS : pour aller sur la page accueil il suffit de cliquer sur accueil dans la barre de navigation.

Maintenant si il n'y a pas de solution à mon problème tant pis.

Val

Edition : Je ne connaissais pas le bug sur opéra : c'est corrigé.
Edition 2 : J'ai créé une page de test sans ajax, sans javacript, sans la barre de défilement juste pour voir le problème sous IE. http://psibp.free.fr/test/
Modifié par Val.G (10 Aug 2007 - 13:24)

Bonjour,

Si ça ne doit pas tourner sous opéra ...
Une piste

<div style="width:700px; overflow: hidden; overflow-x:auto;">
<div id="galerie" style="width:20000px;height:100px;text-align:left;">
<!--[if IE]>
<style type="text/css">
#galerie{
padding-bottom: 15px;
}
</style>
<![endif]-->

Avec le commentaire conditionnel pour IE (rattraper la barre de scroll)

Merci de votre réponse, je vais tester ceci dans la soirée...

Edition : après avoir testé, ça ne semble pas fonctionner, merci quand même
Modifié par Val.G (11 Aug 2007 - 22:29)