Safari weird invisible image anchor problem

greenchilli
greenchilli used Ask the Experts™
on
I'm getting a weird problem with my menu rollovers in Safari.
Safari is displaying the image rollovers as invisible, but when you click and drag on the links - you can see the image.

Website:
http://flyingmusic.com.s84655.gridserver.com/

Open in new window


CSS:
http://flyingmusic.com.s84655.gridserver.com/wp-content/themes/Flying Music/style.css

Open in new window


This problem doesn't occur in Firefox/IE8 and IE7.
Any help would be greatly appreciated.

Thanks,
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
LOL never heard anything like this try and see if you have java installed or flash player.

Author

Commented:
David,

Both Java and Flash are installed/enabled, I also tried Safari on another computer which had the same problem.

This is quite a weird problem!
Then it's unfortunately has to do with safari's lack of compatibility with certain scripts I guess.
Should you be charging more for IT Services?

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
The dropdown menu is made up of css/html only, no script is being used to create it at all.
LZ1
Top Expert 2011

Commented:
I didn't see a problem when compared to IE and FF.  

Are you using an up to date version of all your browsers?
Have you validated your HTML/CSS code?  
Are you using a reset?  

Commented:
#navmenu ul li a:hover img{
    display:block;
    z-index:999999;
}

Not sure, but it could be that safari does not understand a z-index that high. And anyway, why use such high numbers for z-index? You probably do not need a higher z-index than 10 to arrange things.
David S.Consultant & Challenge Subduer
Top Expert 2009

Commented:
z-index doesn't apply to non-positioned elements. To make those elements be "positioned" give them "position:relative". And yes as sybe said, there's no need to use such a high z-index.

You should really consider providing alternate text for images for visually impaired people.

Author

Commented:
Thanks for all the replies. The z-index wasn't always there, I had that put in to see if it would fix the issue, and you're right - the element needed to be positioned for that to work.

However, with or without z-index the problem still exists in Safari.

Browsers are all up to date, I'm using a reset and have tried on several computers - all works fine except Safari.
David S.Consultant & Challenge Subduer
Top Expert 2009

Commented:
It worked when I tried it. Please add the position:relative and z-index declarations back in so we can see.
Thank you all for your help. It turned out to be position relative. Once removed it worked fine.
Cheers.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial