On every web browser except Safari, this website works great. (Well,
by "every" I mean Mozilla, Netscape, and Internet Explorer, for Mac
and Windows).
The site is: http://www.ruleofthirds.com
(the problem does not exist on the first page... just all the other
pages, so you'll have to click on something to see the problem)
The problem lies with images swapping on rollover. I use a small
black .gif file to swap with images at various places in the site so
that they seem to disappear when you're done mousing over them. I use
the same small black .gif file regardless of the size of the image
it's being swapped with. All the other browsers know to resize the
black .gif to the same size as the file it's being swapped with. But
Safari simply overlays the tiny black .gif on top of the image it's
being swapped with, leaving both images occupying the same space
(making it look like a small bite has been taken out of the image).
Can I fix this for Safari users without creating a big headache for
myself? (the only solution I can think of is to actually use black
..gif files that are the same size as the images they're swapping with
-- which seems unnecessarily complicated).
Anyone able to help? Since my target audience largely uses Macintosh
computers, I don't want to shrug off the Safari users.
[Note: I'm no pro when it comes to coding, so my scripting may be a
little sloppier than some...]
