Jeremy Smith's blog

Entry Is Labelled

Safari Bug

In the most recent post in CSS-ing Case, I failed to test Safari. I assumed it would render the same as Firefox.

Turns out, not so much. Here's a screenshot of Safari's rendering. That "Highlights" box should be over on the right, not underneath the content.

sarafi-rendering-css-case.png

The layout is based on the layout described in A List Apart: In Search of the Holy Grail, and there were no problems with Safari rendering those pages.

I stripped everything down to the most basic version of CSS that causes the bug. It's at http://blog.case.edu/jms18/examples/mockups/safari-bug.html. If you look at that site in Firefox, it will look like:

mozilla-rendering-test-page.png

In Safari, it will look like:

safari-rendering-test-page.png

Is this a known bug for Safari? Do I have to resort to a CSS-hack directed to Safari? I know they exist but would prefer not to.

By the way, this is Safari 2.0. Not sure what 1.3 would render it as. If somebody has a 1.3 version of Safari and can test it, I'd be much obliged.

Comments

  1. gravatar

    Found some more browsers the exhibit the bug: http://www.browsercam.com/public.aspx?proj_id=327793.

    Thank BrowserCam!

  2. gravatar

    Safari 1.3 renders the same as 2.0. I think I encountered a similar problem a few months ago and found a fairly simple solution. I'll try to look through my old code and see if I can find what that was.

  3. gravatar

    Just a guess, based on experience with CSS. I haven't read your code so I don't know for sure, but I notice you have borders on your three coloured boxes. Is it possible that you've defined an outer box as width: 600px, say, and the three inner boxes as width: 200px each? Then, with the borders, the total width of each inner box will be 202px, and then they won't fit inside the 600px container. It will work in Firefox if you're not using a valid DOCTYPE because that sticks it in quirks mode and forces it to use the IE5 box model.

    I may be teaching my grandmother to suck eggs here. I only found this blog via a blogroll, and I have no idea if you're already so advanced in CSS knowledge that my paltry contribution is meaningless. Here's hoping I've helped somehow.