I have spent numerous hrs trying to puzzle out ways to get this slider to make use of li's with background images instead of img's.

The reason behind this really is which i plan to make use of the slider for Wordpress &lifier many Wordpress styles apply their very own css qualities to images (for example 'max-width') that will frequently break the slider. I'd appreciate if anybody could browse the following scripts and alter results with li's :) I have been trying myself but for whatever reason all it might do is load forever never showing any images..

This is actually the script:


Meanwhile I'll keep trying figure this out myself. I'd appreciate if anybody could assist me.

This is a test site with a good example of the slider no longer working using the theme 'Thematic' which is applicable a 'max-width' of 100% to images &lifier one particular theme which does not (hence the slider works perfectly). FYI getting rid of the max-width from 'Thematic' &lifier other styles fixes the slider each time making this certainly the issue hence why If only to make use of li's rather than img's.

http://www.matthewruddy.com/demo/ <- no longer working

http://www.matthewruddy.com/demo/?preview=1&template=twentyten&stylesheet=twentyten&TB_iframe=true <- working

Because of anybody who are able to help! Matthew.

As akonsu stated, your best choice is using a particular image style towards the lof class. The default style based on the styles image.css file only will get requested.. you suspected it.. default images. Correctly changing it within the lof class will overwrite that rule and employ the brand new style. In case your browser still does not appear to become picking up, throw a large body fat !important towards the finish from the style rule and everything except IE6 will get it all right.

Max-width is just put on images without any other specific rules present, hence "cascading down" style sheets. CSS rules marked !important take priority over other rules for the similar type. Normally in CSS the guidelines work all the way through, if you designated a brand new style for an element further lower the design and style sheet or perhaps in another style sheet then your later rule would take priority. !important guarantees this rule has priority. ie:

p { color: blue !important; }
.container h3 { do stuff }
.container p { color: red; }

In each and every browser except IE6 the font color for those paragraph elements is going to be blue as lengthy as the doctype is correctly set as well as your not receiving thrown into eccentricities mode. However, doing something similar to this:

p { color: blue; }
.container p { color: red !important; }

Can have a red-colored font color for those paragraph elements within the container only, for those browsers. This is guaranteed as even when IE6 does not comprehend the !important rule, still it fully knows cascading down rules and can apply the design and style according to that which was last defined.

So inside your situation, the next rule works all right and fixes your display problems in IE:

ul.lof-main-wapper li img { max-width: none !important; }