28173 sujets

CSS et mise en forme, CSS3

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:

     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 Smiley ohwell ??
Pour une visualisation du problème tu peux te rendre à l'adresse: http://dev.waka.ca/mpd. Ensuite, tu dois créer une recherche. Dans la page du choix des critères de recherche, tu vas voir ma flèche verte qui apparaît. Comme je disais, sous Firefox aucun problème, mais dans IE quand on scroll la zone à droite. La flèche suit le mouvement du scroll! C'est vraiment en le voyant qu'on comprends. C'est difficile à décrire comme ça Smiley cligne