This is my testing site. I'm rotating out 4 Top Featured stories with associated images at the top. This is driven by the Malsup Cycle plugin for jQuery (http://malsup.com/jquery/cycle/) and it is actually working 97%. I have some key issues though and cannot seem to get a solution that will work:
1. The rotator module functions great in FF but in IE 8 a white background fills the container and I can't get it to go away. I have tried the cleartype: false trick and cleartypeNoBg trick too and it's still not working.
The only thing the cleartype trick does is shut the white box off and that would work - except that the subtle drop shadow on each of the 4 rotating PNG files then turns to an ugly fat black border and the transparency is gone. I know this has something to do with how IE 8 is swapping out the PNG's and that's where the issue is but I can't seem to fix that either. I've even installed the Unit PNG fix (http://labs.unitinteractive.com/unitpngfix.php) and nothing seems to help. I have no experience with IE8 filters and what not. I don't know how to fix filters!?
2. The second issue is that in IE8 when the fade occurs from one transition to the next, there is still a brief moment where the paragraph title & excerpt text "shifts or jumps" slightly when the fade cycle initiates. It just looks unprofessional & crappy.
3. The third issue is that I cannot figure out how to make the round blue buttons show a series of numbers like 1,2,3,4 to tell the user they can be clicked on as a sequence. Right now they are just blue buttons without numbers, although when you click each button they do jump the rotation cycle to the appropriate slide - so it does work functionally, but it's not exactly user-friendly. It should be smooth and easy, much like this: http://www.whitehouse.gov/ ....I wanted there to be little buttons with numbers in each below the READ MORE button so a user could jump from article to article without having to wait for the entire cycle to occur.
1. If you do not want cycle to set an explicit background color on your slide container then you must set the cleartypeNoBg to true.
2. You can thank IE for the crappy text rendering that you see when applying the fade transition. This happens because IE does not perform cleartype corrections on elements that have an opacity filter set. Of course cycle tries to fix this for you by applying a background color (which minimizes the nastiness) but then you're back to problem #1. Pick your poison.
3. You're explicitly using a static image for your pager trigger. Why not use a span or something with a background image and set the text to the slide number? Or something like that.
Leave a comment on malsup's reply
Change topic type
Link this topic
Provide the permalink of a topic that is related to this topic