PDA

View Full Version : CSS/Image map issue in Safari



EpiKAC
Feb 1st, 2010, 11:19 PM
I'm working on a demo site using WordPress as a CMS and everything seems to be fine until someone views the image map on this page in Safari. Then all the pop-up images appear in the wrong places.

It works perfectly in IE 6/7/8, Firefox & Opera. I don't know what I've missed...

http://alphasite.fatcow.com/team/

Thanks in advance!
Adam

mbaker
Feb 2nd, 2010, 02:19 AM
On the browsers I've tested this on (Safari, Firefox, Chrome), this was a general problem, not just Safari. The problem was worst with a narrow browser window. The problem is due to the team image not being a fixed distance from the left margin of the window, but the captions are.

By making the caption positions relative to the top left corner of the team image, the following should fix the problem for all browsers.

For all team members reduce left by 130 and top by 50, so for example:

#erik { position:absolute; left:785px; top:205px; width:...
becomes:

#erik { position:absolute; left:655px; top:155px; width:...
and add to your styles:

.teampix { position:relative; }
Then move all of the team hidden caption divs inside of the <div class="teampix">

Having made these changes, you may want to make a few minor adjustments to some of the caption positions.