Hacked to Death ii (Safari)

Apologises for the lack of posts the last few days. I’ve not been on holiday, far from it, I’ve started a new contract. I will be producing for a leading media company.

This actually brings me nicely onto this blog entry’s topic - Hacking Safari. I am used to testing on the major PC based browsers (FireFox, IE, Opera and to a lesser extent Mozilla, Netscape, linx) but have never been required or had the hardware to test with Macintosh’s Safari.

For the most part if a design works in FF and IE, Safari will quite happily play along. However, on one page where I have used relative positioning to move an image up by a few pixels I encountered a problem. FF and IE6 didn’t line up. I was forced to use an IE6 hack (see previous hacked to death entry) to set a different pixel adjust for the two browsers. While this solved the problem in IE6, Opera, FF and IE7 - Safari was not happy.

While Safari had rendered the page as FF it treated the positioning of this image as IE6. As IE6 hack only affects IE6 and older Safari’s positioning of he image is not corrected. Quiet a problem.

Thus began my quest to find a CSS hack that only affected Safari. Preferably an elegant hack (if there is such a thing) still allowed my style sheet to validate and would not affect future versions of The browser.

I wish I could tell you I’d found a solution. So fa the only option I can verify works is the ugliest hack ever. It requires you to add a hash just before the closing bracket of the style you want to hack. The style has to be written on a single line (see example below). What this does is cause Safari to escape from the style sheet completely.

This means any styles following this will be read by other browsers but ignored by Safari.

This means your hack has to go at the very end of the style sheet. You will need to put the safari friendly style first (Including the hash hack) then the IE friendly style and finally the style for all other browsers (using the child selector - see example below).

This hack can only be used on 1 style per style sheet. If you need more than 1 Safari hack you need multiple style sheets.

This is a far from ideal so my quest for a better Safari hack continues. For now I’d say using an alternative way of positioning an item or redesigning a page would be preferable than using this hack. My search for a better hack continues.

=Dave Long=