Strange styles en ligne venant d'où?

Question

J'ai un script, qui m'a causé quite some aujourd'hui. :-) Le script place apparemment des styles en ligne sur l'élément cible, mais je ne trouve pas où ils sont définis. Le script est donc un curseur appelé EasySlider.

Cela fonctionne assez bien pour afficher le contenu présenté dans une diapositive. Toutefois, le script place une hauteur en ligne sur l'élément ciblé, qui se comporte bizarrement dans Chrome. Mais pour être honnête, je ne sais pas pourquoi ou d'où la hauteur en ligne est définie de toute façon.

Donc la hauteur du #slider est définie comme 265px dans ma feuille de style. Mais dans Chrome, le script met une hauteur inline de 21px, et dans Firefox il rend avec une hauteur en ligne de 271px (exactement 21px de plus que ma hauteur définie).

Des conseils sur celui-ci? Voici la page en question, les éléments étant les curseurs pour chaque affichage Rod: http://tuscaroratackle.com/rods/

Le balisage est génériquement comme celui-ci, et le script fait cela en un curseur animé et génère des boutons nav:

<div id="slider-1"> 
    <ul> 
     <li><img src="/img/rod.jpg" /></li> 
     <li><img src="/img/rod.jpg" /></li> 
     <li><img src="/img/rod.jpg" /></li> 
    <ul> 
</div> 

Answer 1

Rechercher en easySlider.js, autour de la ligne 65.

var h = $("li", obj).height(); 

puis quelques lignes plus loin:

obj.height(h); 

ressemble à easySlider examine la hauteur des éléments li au moment où il est initialisé, puis définit la hauteur de lui-même (le div wrapper) pour correspondre. Le problème est que vos éléments LI contiennent des images qui ne sont pas encore chargées au moment où easySlider est initialisé. Par conséquent, les li sont seulement une ligne (du texte) haute (dans ce cas, c'est 21px).

La solution facile est d'ajouter une hauteur à vos images (ou aux éléments li dans lesquels ces images vivent). Si vous ajoutez de la hauteur aux éléments li, vous devrez vous assurer qu'ils sont position:block, afin que la hauteur prenne effet. - Il serait beaucoup plus facile ici d'ajouter simplement une hauteur à l'élément img. La solution la plus compliquée (mais plus générique) est que jquery surveille le chargement des images et n'initialise pas l'easySlider tant que les images ne sont pas chargées.

Une autre approche serait de supprimer la ligne où easySlider définit sa propre hauteur. Cela pourrait régler le problème dans votre cas, puisque vous appliquez toujours easySlider à un élément de niveau bloc, il n'a peut-être pas besoin d'une hauteur fixe.

bonne chance. [encore ;-)]