I'm having css issues in Safari 3, and need to use jQuery to disable the styles for that particular browser.

I'm having a nightmare finding out how to do it! I hear the browser detection in jQuery is deprecated?

Is there any way for me to detect Safari 3 and below?

It's deprecated but still present in the code. $.browser.safari should return true or false if Safari is present. That is as much support as jQuery offers. I do encourage you to not use browser detection, however, especially not to solve CSS problems.

Usually all that is needed is to simplify your CSS in order to obtain compatible results with Safari. It's interpretation is pretty standard, after all.

Thanks, I can't seem to target a specific version though.

I did actually try for hours to fix the CSS problem but with no luck! It doesn't seem like an average CSS problem though, see here:

http://www.freshbeat.co.uk/concept/m...raphy.biz/dev/

In Safari 3, see how the image in the nav loads up wrong, but then when you hover over the link, it corrects itself.

I have a feeling it's something in the lavaLamp code. I even took the generated HTML and pasted it into a static page, and it loaded up fine?? Surely the problem must lie within the lavaLamp code?

Don't have Safari 3 installed on this computer (I make due with Chrome and Safari 4), so hard for me to look at it.

Try blurring then focusing the .back class to see if that fixes it in Safari. If that doesn't work, toggling its positioning for a second when the document is ready, from relative then back to absolute again, might work. Stupid tricks will sometimes fix bad behavior like this.

Thanks, I've tried it by adding this to my code but nothing happened, Im not sure if I did it right?

            jQuery(document).ready(function() {
                jQuery(".lavaLamp .back").focus()
            })

I even tried

jQuery(document).ready(function() {
                jQuery(".lavaLamp a").each.focus()
            })

but once again, no results!

Since focus is a singular event it must be on only one element at a time. It is also a native client-side JavaScript method, so it could be used like this:

jQuery(".lavaLamp a").each(function() {
     this.focus();
     this.blur();
});

I'm not saying this will work, I'm just speculating. I think you should be focusing on the .back class actually, since it actually holds background image. Be sure to do this after the lavaLamp plugin is actually activated, or it will be pointless.

Another idea is to place the lavaLamp activation code into a $(window).load(function(){}) event instead of the $(document).ready(function(){}) event, so that the browser will attempt to load all images before running the code.

Just tried the $(window).load(function(){}) event and it worked! YYYEEEEESSSSS!!!

Thanks a million, you have no idea how much I've been ripping my hair out over the last few days because of that!

You're welcome. I gave it my best guess... Glad you got it working.