I have created the following site, http://www.giles-and-elsas-wedding.com/test3.pl
I noticed the other day that I had some problems with my Z-Indexs. Basically I have loads of hover zones for each part of the car which brings up a pop up box. If there was another hover zone behind where the pop box appeared with a higher z-index then that would cause the pop box to disappear and for the one behind it to appear.
Now I thought this would be easy to fix, so I added a z-index of 500 (highest on the whole page) for the pop up if someone has hovered on it (dd a:hover span).
However it seems that both Firefox and IE are ignoring it. I dont understand why as obviously all the other properties in my a:hover are taking effect, why not the z-index?
Any ideas why?
Edit: Forgot to say, an example of this is if you hover on the front windscreen and then move the mouse on to the pop up box. As your mouse reaches the text and enters the zone behind the pop up (where the side mirror is) you will see what I mean.
I want to set the z-index of the pop-up box to be the highest value on the page so that it is always on top, regardless of what other hover zones there are.