Safari CSS

design

#1

[update: cache problem on test machine. sigh]

I’ve been trying to replicate and convert a frame-based site to tableless CSS. I’m fairly clueless so I muddle along by trial and error. (My hair starts to hurt from reading all the CSS browser-workaround pages and I am beginning to regret starting down this path.) I don’t have a Mac so I’ve recruited a friend to look at the development site for me from time to time using Safari and IE Mac. I am completely stumped and unable to get past a menu background problem. See the horror here: http://www.ctca.us
I’ve tried redundantly specifying colors all over the place.

Here is a menu snippet:

[code]

THE CAIRN

History

Breed Standard

...etc. etc..
[/code]I've tried to set background colors all over the place in the stylesheet (in the ID, in the menuitem class, body, etc.): [code] #leftcontent { position: absolute; left:0px; top:60px; width:125px; background-color:#386898; border:0px solid #000; text-align:right; }

#leftcontent p {
font:10px/1.2 Verdana, Arial, Helvetica, sans-serif;
color:#c0c0c0;
background-color:#386898;
}

#leftcontent h1 {
font-size:10px;
color:#fff;
background-color:#386898;
}

.menuitem {font-size:10px;background-color:#386898;color:#c0c0c0;}
.menuitem a {background-color:#386898;color:#c0c0c0; text-decoration:none; font-weight:bold;}
.menuitem a:link {background-color:#386898;color:#c0c0c0; text-decoration:none; font-weight:bold;}
.menuitem a:visited {background-color:#386898;color:#c0c0c0; text-decoration:none; font-weight:bold;}
.menuitem a:hover { background-color:#990000;color:#FFFFFF;text-decoration:underline;}
[/code]For some reason I can’t figure out what’s happening with Safari. I even tried explicitly setting <p style="background-color:#386898"> on the menu items but they still have a white background.

Any tips? I know my css is a mess. If I can get things working all around, then I might get brave enough to start paring it back to see which pieces are truly redundant. I’d also like to learn about using em and % instead of px for font size. But that’s later :slight_smile:


#2

Hi Haggis

I am running a Mac. I checked your site with Safari v74, Firebird 0.6, and IE 5.x.

I must be missing something – they all seemed to display pretty much the same, especially with regards to color in the menu.

The Cairn font is in white, the rest of the fonts in grey. The background blue until mouse over when the link turns white on the font and red on the background.

Help me understand the problem you are trying to track down.


#3

Gah…you are seeing intended behavior. It sounds like it is working for you. Oh my. The screenshot I got in the mail showed a white (block) background behind each element in the menus. (Thus the gray text was reeeally hard to read; and the menu title was invisible.) It looked like white tape was placed over each menu item. I’ll ask my tester again what version she’s using. Thank you for looking. I was going insane.


#4

Your site displays just fine in the latest version of Safari, as well as the Gecko-based Mac browsers, for me, too.

Debugging Safari CSS at this point is a bit trickey; since the browser is in beta, it is going to have bugs that cause rendering glitches unrelated to problems with your code.

There have been huge improvements since the first beta releases (which showed odd behavior on many perfectly valid sites), which basically leads me to suggest that you don’t worry too much about working around Safari rendering glitches until it hits a final version–otherwise you’re just chasing a moving target, and it’s unlikely that the early beta versions will survive long in the wild anyway.

Once it does go final (probalby in a month or so), then you should start looking at it and making sure it doesn’t have some quirk that affects your site (unlikely, really, if the code is valid)–the percentage of Mac users browsing the web may not be huge, but of them quite a few will end up using Safari (and people running a KHTML-based browser, if one takes off, on other platforms should have the same issues).

Good luck.


#5

Thank you both. I think it in the end it was a cache problem. Arg.


#6

[quote]Thank you both. I think it in the end it was a cache problem. Arg.

[/quote]

The real question now becomes, are you going to be testing with OmniWeb 4.5? ;>

  • Jeff @ DreamHost
  • DH Discussion Forum Admin

#7

Why yes indeed, I would like to do that. As I discovered to my chagrin, it was a, er, cash problem. Buy me a Mac or rent me some friends and I’ll be testing away :slight_smile: