Previous Message
Next Message

menu with animated .gifs and Safari

Sent by Doctor on 28 March 2006 23:11

I'm trying to reproduce  the look and feel of an existing menu for an 
elementary school. The existing one is an  image,  dreamweaver-sliced 
and placed into a table, which isn't easy to edit.

The result is at
Css is , with one piece in the 
head of each  page.

The problem I'm facing is with the animation upon roll-over. I started 
with ~40x40 .gifs - one static, one animated, as background images. But 
Safari will only display the animation if no-repeat is NOT specified.
What  I have now is the small, square static image, and an animated 
image that is precisely designed to fit the width of the text of each 
menu item. 1 pixel more, and the animation repeats in  the far right; 1 
pixel less, and Safari doesn't animate it.

This is unsatisfactory for two reasons. It will require changing the 
image width every time the text changes length. Not a killer, because 
only Special Projects will change,  most likely. And  changing that 
background image is a lot easier than changing an image that also 
contains the text.

The bigger problem is that if the user increases the text size, the 
animation will repeat, in most, if not all, browsers, because no-repeat 
isn't specified. Also, in Safari, the animation won't display if the 
text size is reduced (the width of the background image then being too 
big for the text).

The three choices I see are:
1) Leave it as it is, and let those who change the text size suffer.
2) Go back to square images, specify no-repeat, and let Safari users 
3) Leave the existing sliced image in a table, and let me suffer when 
the menu changes.

Choice #2 is, in this case, not as good as it might seem, because this 
school uses Macintoshes, and hence many of the parents - the majority 
of our visitors - do too, and most of them use Safari.

Any other suggestions?

And has someone communicated with the authors of the FF developer 
extension that it would be greatly improved if it would display images 
when they are in a sister directory to the css one? To facilitate 
review, I just had to move my css file, and duplicate my images 

Thanks in advance.


css-discuss [EMAIL-REMOVED]]
IE7b2 testing hub --
List wiki/FAQ --
Supported by --
Previous Message
Next Message

Message thread: