Bonjour à tous!
Après deux jours de travail acharné pour mon problème je m'en remet à vous. J'ai fait énormément de lecture un peu partout, mais je n'arrive vraiment pas à trouver de solution.
Mon problème:
Je dois positionner cette flèche (http://dev.waka.ca/mpd/fleche.jpg) en position absolute (div.fleche). Son conteneur (div.conteneur) est positonner en relative. Côté positonnement tout va bien sous Firefox et IE. Ma flèche se positonne toujours comme je le veux. Mon problème c'est que quand je scroll ma page dans IE, la flèche reste aux mêmes coordonnées et suit le mouvement de ma scroll bar. Elle n'agit pas comme dans un scroll normal. Vraiment étrange! (Je dois aussi mentionner que je travail avec la libraire Yahoo extention. Donc ce n'est pas un contexte de page web "normale".)
Je vous ai fait une petite démo simplifié de mon CSS et de mon html:
Mon CSS:
Mon html:
Je ne sais pas si quelqu'un ici va pouvoir m'aider, mais je prends une chance quand même. Quelqu'un a une idée pourquoi ma flèche agit aussi étrangement sous IE ??
Après deux jours de travail acharné pour mon problème je m'en remet à vous. J'ai fait énormément de lecture un peu partout, mais je n'arrive vraiment pas à trouver de solution.
Mon problème:
Je dois positionner cette flèche (http://dev.waka.ca/mpd/fleche.jpg) en position absolute (div.fleche). Son conteneur (div.conteneur) est positonner en relative. Côté positonnement tout va bien sous Firefox et IE. Ma flèche se positonne toujours comme je le veux. Mon problème c'est que quand je scroll ma page dans IE, la flèche reste aux mêmes coordonnées et suit le mouvement de ma scroll bar. Elle n'agit pas comme dans un scroll normal. Vraiment étrange! (Je dois aussi mentionner que je travail avec la libraire Yahoo extention. Donc ce n'est pas un contexte de page web "normale".)
Je vous ai fait une petite démo simplifié de mon CSS et de mon html:
Mon CSS:
body {margin:0; padding:0;}
div.colonne {width:300px; height:350px; float:left; padding:30px 0 0 30px;}
div#s_droite {background-color:#98bc3e;}
div#s_gauche {background-color:#f691cc;}
div.conteneur {position:relative; width:150px; border:1px solid black; height:150px; background-color:white;}
div.arbre {margin-left:30px; margin-top:20px; width:50%; height:50%; padding:10px 0 0 10px; background-color:#f67f17;}
div.fleche {position:absolute; top:0; right:-115px; background:url('http://dev.waka.ca/mpd/images/fleche_add.png') no-repeat; width:108px; height:147px;}
Mon html:
<div id="s_droite" class="colonne">
<div class="conteneur">
<div class="arbre"> Arbre </div>
<div class="fleche"></div>
</div>
</div>
<div id="s_gauche" class="colonne">
<div class="conteneur">
<div class="arbre"> Arbre </div>
<div class="fleche"></div>
</div>
</div>
Je ne sais pas si quelqu'un ici va pouvoir m'aider, mais je prends une chance quand même. Quelqu'un a une idée pourquoi ma flèche agit aussi étrangement sous IE ??