David Anderson's Unfinished Symphony

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

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

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

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

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

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.

Most developers are, I would hope, aware of alt attributes, and hopefully how to use them correctly. It seems, however, that longdesc is a bit of a mystery even to some of the more experienced and knowledgeable amongst us.

With an image's alt attribute we're able to insert a small segment of text that provides an alternative if, for whatever reason, the image is unable to be displayed. It may be something simple, such as "my company logo" to replace your logo when it doesn't open up. With more complex images, and images that convey very important information such as charts and diagrams, a more detailed description is required - not in case the image doesn't display, but to provide an alternative means of providing the detailed information the image contains. In this case the alt attribute just isn't enough. It isn't viable to describe a graph of medical results, for example, in the few words that alt attributes allow us. For circumstances such as in our medical chart example we have been provided a more powerful method with the longdesc attribute. However, due to the mysterious nature of longdesc it seems that many of us are incorrectly using it in the same way as we use alt attributes. To illustrate the point, consider the markup for an embedded image with alt attribute:

1. <img src="image.gif" alt="my company logo" />

As the above example shows, alt attributes contain our alternative text enclosed between quotation marks and within our image tag. Longdesc attributes, however, don't enclose the long description within the confines of its quotation marks, instead longdesc contains a link to another web page where we would describe in detail the image in question. Nor would our longdesc attribute be used to replace our alt attribute - instead we would use both; for example:

1. <img src="compleximage.gif" alt="Results graph of medical data" longdesc="/clinicalresults.html" />

Rather than being a more detailed, and direct, replacement for alt attributes the longdesc attribute, and associated descriptive web page, is intended to be used in conjunction with alts in order to enable us to provide our visitors with as much information as they might require about the imagery used.

And will be for a few days more. I'll carry on as and when I can.

In the meantime, has anyone else noticed that Firefox has a display bug when resized to 800×600 pixels? My vertical scrollbar vanishes (irrespective of the site I'm on) at that resolution and doesn't appear until it's resized to at least 900px.

Amended: looks like upgrading to WP 2.01 decided to break my sidebar headers oh what joy. I suppose it serves me right for hacking the functions files

Amendment 2: Sidebar fixed

Don't mind me, I just want to test a few ideas.

There's a new craze sweeping the interweb folks, one that involves you earning money while you sleep. Yes, AISs are the new Hula Hoop™ with hundreds of people jiggling their online hoops in the hope of striking it rich. Not one to be out done I've decided to join the movers and shakers to see if I can make my first million before the age of 21, erm, well …

Tribal Tattoos is the road to riches being taken by Sarah and I. It's also a road that we've put a bit of effort into - laid a few paving stones, dug a trench here and there, planted some shrubs. You know, tidied it up a bit. Amongst other things we've researched the market, sourced a supplier who's happy with the concept and the opportunity to have another outlet for his artwork, restructured the generated template with standards compliant markup and CSS, built a simple shop, and so on - in other words we've invested a little time, effort and money into the venture and, most importantly in my opinion, we tried to make sure that we offer something of value to any visitors that drop by.

We've also got a number of ideas that will mean we continue to work on it from time to time - including improving the site's accessibility (getting rid of the pixel widths would be a good start); adding links to the directories from the 600+ sites that we have to sift through; adding more flashes to the tattoo shop and sourcing other products, such as the ebook we currently have under production.