View Full Version : Rollover problem...

10-23-2004, 07:28 PM
Can someone take a look at this page and see if the rollover works with Safari 1.2 and 1.2.3. My client is saying the "image transfer button" is not working, but I get it to work on FF PC.

Site: http://www.diane-etzwiler.com/image_transfers.html

Thanks a ton!


After dealing with the sitcking and rollover bug in Safari, I'm starting to wonder if its worth my time, changing this site from tables to div/css. Also, Everyone has seem to forgoten the double image bug in safari 1.2 when using "sliding doors" technique. This bug is still there on Safari 1.2.3. All you have to do is keep refreshing over and over and you will see the background image apear. The fix is to put background-image: none; in the parent container. Wow, that was a ***** to figure out!!

So, be aware of Safari, it's still buggy out there. The only site I could find that lists Safari bugs is here: http://dev.l-c-n.com/safari/ All the old sites have taken there bug lists down when 1.2.3 came out. I think some of the bugs still exist. I will be going thru my process and the problems occuring with safari and ie mac on my site http://www.parrfolio.com/thoughts/

10-23-2004, 08:46 PM
Switching to a CSS based layout is definately a good thing. Using semantic mark-up can only improve your the accessibility of your page. I don't know if you noticed, but I didn't say a "CSS/div based layout" since using thousands of div tags is just as bad as using all tables.

Take a look at the imdex page of my site (http://www.quiterude.com/), there are only 3 <div> tags on it. I know it's not a particularly complicated layout but I hope my point still gets accross, use tables for tabular data only, use the correct tags for the job that needs doing and only use div tags where you just need an extra tag to hang styles on.

Anyway, onto your rollover problem. Unfortunately I do not have access to a Mac anywhere so I can't test and offer a fix. However, I would very much like to put forward some non-JavaScript rollover code. It should be pretty easy to work into your page as well. I apologise for the seemingly "dodgy" CSS, most of it is to compensate for IE, it would all be a lot simpler if it weren't for IE.
height:0 !important;
height /**/:100px;Unfortunately you have to specify the height of the link no less that 3 times, I will look into a better method of image replacement that does not require this (I tried the Shea method but IE messes up the rollovers when I use that).