An Unfinished Symphony

It's about the internet and stuff.

Safari's margins for error

I was reminded earlier yesterday about a post I've been meaning to write for over a month, when I was given a little feedback on how this site displays in Mac browsers. Whilst the site rendered as expected in Firefox/Mac, there was an issue with the left hand margin on the far left column which consequently was hugging the edge of the browser window in Safari. This came as a bit of a surprise to me, as I'd spotted the issue a month before when using iCapture and thought that I'd fixed all instances of it – seems not. The original problem was far more dramatic than the window hugging left column that I saw today, whereby a couple of the columns had lost their margins and were hugging their neighbour(s)' borders.

A view of this site, and the collapsed margins, in Safari
View of ap4a.co.uk in Safari web browser before fixing CSS
As you can see, the left hand edge of the first column is hugging the edge of the browser window; whilst the margin set between the left and middle column have collapsed completely, forcing the two columns to align up against each other.

After a review of my CSS I couldn't see any obvious problems – all columns had margins set in percentages, designed to be flexible along with the rest of the layout, and this had proved robust in all the windows browsers which I had tested on including, after a slight modification, in IE. It could only be that it was that slight modification which was the issue. In order to get IE to play nicely I'd had to reduce the margins very slightly, by 0.1% from 1% to 0.9% and it appeared that Safari didn't like non-integer percentage values. In order to check that this was really the case I ran several tests with various sized margins using percentage units alongside controls using ems – ems beings chosen as, like with percentages, decimals are allowed. To view the test page visit Safari Web Browser Margin Tests

Safari Browser – Test One: margins on floated elements

Test One: control example using em-based units
Margin test using ems - this is a control test
This control test consisted of four equal sized, floated divs being separated horizontally by em-based margins ranging from 0.2em up to 0.8em. As can be seen in the image taken from a screen capture of the Safari Web Browser Margin Tests the margins are working as they should be.
Test One: test example using percentage-based units
Margin test using percentages, not a control test
This test consisted of four equal sized, floated divs being separated horizontally by percentage-based margins ranging from 0.2% up to 0.8%. As can be seen in the image taken from a screen capture of the Safari Web Browser Margin Tests the margins are collapsing together as described above.

Safari Browser – Test Two: margins on unfloated elements

In order to rule out the possibility that this was a float bug, rather than one related to using non-integer percentage sized margins, it was necessary to conduct a second test on unfloated elements.

Test 2: control example using em-based units
Margin test two, using ems - this is a control test
This control test consisted of four equal sized, unfloated divs being separated vertically by em-based margins ranging from 0.2em up to 0.8em. As can be seen in the image taken from a screen capture of the Safari Web Browser Margin Tests the margins are working as they should be.
Test Two: test example using percentage-based units
Margin test two, using percentages - this is not a control test
This test consisted of four equal sized, unfloated divs being separated vertically by percentage-based margins ranging from 0.2% up to 0.8%. As can be seen in the image taken from a screen capture of the Safari Web Browser Margin Tests the margins are still collapsing together.

Safari Margin Tests: Summary

As with any browser, despite it's strong adherence to web standards, Safari has its share of bugs. As a result it can't be ignored during the testing phase of site development, which further emphasises the need to test in all possible browsers on all operating systems available to you. If, like me, you don't have a Mac to test sites you might think testing in Mac only browsers is an impossible task, it isn't. There are a number of services available to help with the task, some free such as iCapture, whilst others are commercial. There's also a number of places to download older versions of the browsers that you might already have on your computer, such as the browser archive at Evolt.org.

Up arrow

Comments on 'Safari's margins for error'

RSS feed for comments on this post.

gravatar

A quick update – Safari 3 beta for Windows doesn't have this issue. I don't know if that's also the case for Safari on Mac, but I would imagine so (if anyone can confirm this that would be great).

gravatar

An anonymous commenter has pointed out that Safari 3 for Mac also doesn't display this behaviour.

(nb. please note that anon comments won't be approved – to leave a published comment a legitimate email address must be provided, thanks.)

Sorry, the comment form is closed at this time.