Link to home
Create AccountLog in
Avatar of emlynrg
emlynrg

asked on

CSS Crossfading images browser display problems

Hi Experts

Just redesigned a website for some one and having a little problem with getting my images to cross fade in different browsers. i tested it on my laptop in chrome, safari, opera, mozilla and IE, it worked in all but IE. But through further testing it doesn't work in older versions of the other browsers. does anyone know of a better way of cross fading the images or fix for the way i have done it.

I have attached the style sheet for you to look at, the web address is www.bandbcardigan.com 

Thanks
style.css
ASKER CERTIFIED SOLUTION
Avatar of LZ1
LZ1
Flag of United States of America image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Can you elaborate your problem.
I think you are facing the problem because of below element

<div id="bg"/>

Just remove z-index property of this element and check.

Old browser will not understand all the latest CSS style, may be you are getting problem because of that.

Please explain your problem, if you are still facing the issue.
Animation is pretty dicey.  Firefox has supportrf them since vers 16.  Chrome and Safari use -webkit and they can be strange at time.  IE does not support prior to IE10 and the jury is still out on that mess. Opera should work most of the time.

If you are going to use the latest of CSS3 and HTML5 then you might find this reference handy:
http://html5please.com/

They seem to be keeping up to date, and I have found them to be at least 90% accurate.

Cd&
Avatar of emlynrg
emlynrg

ASKER

hi everyone

thanks for the quick responses, i'll be working through the solutions tomorrow as its getting a little late here in the uk. so i'll let you know how i get on.

Thanks
Avatar of emlynrg

ASKER

Hi yats

removing the z-index prpoerty from "bg" had no effect. i'll be trying Lz1's jQuery idea next to  see if i can get that to work, it's not essential for it to be straight CSS, just wanted to see if it would work more than anything. i will let you all know if i cant get the jquery to work.

Thanks
If you 100% knew that your users were going to use a newer browser, then yes it's a great proof of concept. As COBOL said though, the animation is choppy sometimes and you could run into other browser issues eventually. Using jQuery or JS for something like this is what you'll need to do to ensure cross-browser compatibility and maintain the user-experience.
Avatar of emlynrg

ASKER

Hi everyone

i've now replaced the css slider with the jQuery slider suggested by LZ1 and it now works across all browsers, there are still a few minor formatting issue in opera and safari but i'll sort those out in due course. I'm going to award the points to LZ1 as he/she suggested the slider. But thanks to rest of you for your input, i really appreciate it.

Thanks