Safari. CSS rendering issue. Help!

December 12, 2003 5:00 AM

Safari CSS rendering issue.

[more inside]

I am developing a website, using CSS menus where I set the anchor tag's width to a fixed amount and the display attribute to "block", which gives nice, fast buttons.

It works fine in all browsers I've tested except Safari, which shows the links as normal text. The thing is, I used the exact same technique for another site, and it renders fine in Safari.

I'm stumped, don't know what the difference is between the two. Plus, I don't have a Mac, so I've been using iCapture for testing purposes, but it's slow.

The links:

Menus don't work
CSS (the tag in question is ".menu")

Menus do work
CSS (the tag is ".carrmenu")

Any help will be greatly appreciated.

posted by signal to Computers & Internet (8 answers total)

i don't have safari so i won't be of much help but i did notice that in the broken css, you've declared an id and a class as menu. that might be messing things up, who knows.
posted by poopy at 7:56 AM on December 12, 2003

Response by poster: I removed the id defintiion, still no dice, even though the CSS validates, except for a non-standard IE filter.
posted by signal at 9:14 AM on December 12, 2003

I'm running safari and the links work in both examples. It appears as if the way that icapture is rendering the page isn't correct.
posted by birdherder at 9:51 AM on December 12, 2003

Slightly off-topic, does anyone know an effective way to hide CSS from Safari?
posted by yerfatma at 10:00 AM on December 12, 2003

It works, but you're really doing this the hard way. You can achieve those effects using straight CSS, no JS, and with nice structurally correct HTML

Check out Listamatic for samples of what I'm talking about.
posted by adamrice at 10:00 AM on December 12, 2003

Response by poster: Ok, I added a "_" character to the "filter" attribute, which makes it only visible to IE, which is ugly but works. Apparently Safari takes exception to non-standard CSS.

adamrice, I'm using the JS for the imagerollovers. Is there a way to do those using just CSS?

The menus are pure CSS, and actually pretty similar to some of the examples on that link you posted (which is a great resource, BTW).
posted by signal at 11:18 AM on December 12, 2003

Yes, I think you can do those rollovers in straight CSS. Check out Eric Meyer's page for some really trippy CSS effects.
posted by adamrice at 12:31 PM on December 12, 2003

CSS rollovers
posted by yerfatma at 2:29 PM on December 12, 2003