Strange inline styles coming from where?

Question

I have a script, which has been causing me quite some issue today. :-) The script is apparently placing inline styles on the target element, but I can't find where they are defined.

So the script is a slider called EasySlider. It works quite nicely to display featured content in a slide fashion. However, the script is putting an inline height on the targeted element, which is behaving oddly in Chrome. But to be honest, I'm not sure why or where the inline height is being defined from anyway.

So the height of the #slider is defined as 265px in my stylesheet. But in Chrome, the script puts an inline height of 21px, and in Firefox it renders with an inline height of 271px (exactly 21px more than my defined height).

Any tips on this one? Here's the page in question, the elements being the sliders for each Rod posting: http://tuscaroratackle.com/rods/

The markup is generically like this, and the script makes this into an animated slider and generates nav buttons:

<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

Look in easySlider.js, around line 65.

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

then a few lines later:

obj.height(h); 

looks like easySlider examines the height of the li elements at the time it's initialized, then sets the height of itself (the wrapper div) to match. The problem is that your LI elements contain images which are not yet loaded at the time the easySlider gets initialized. Consequently, the lis are only one line (of text) high (in this case, that's 21px).

The easy fix is to add a height to your images (or to the li elements in which those images live). If you add height to the li elements, you'll have to ensure that they're position:block, so that the height takes effect. -- it would be much easier here to just add a height to the img element.

The more complicated (but more generic) solution is to have jquery monitor the loading of the images, and don't initialize the easySlider until the images are done loading.

Another approach would be to remove the line where easySlider sets its own height. That might fix the problem in your case, since you're always applying easySlider to a block-level element anyway, it might not need a fixed height.

good luck. [again ;-) ]