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 http://tohunga.net/css-d/about.html Css is http://tohunga.net/css-d/menu164.css , 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 suffer. 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 directory. Thanks in advance. Doc ______________________________________________________________________ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7 List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
