This just a quickie …

While I am not one to promote the use of hacks, I found myself in an emergency situation with a website that went live with a serious attitude problem in Safari.

The problem (in essence) was with a relatively positioned element (I understand than the same problem manifests in defining margin values and who knows what else) that was sitting lower than intended in Safari.

The first hack that I tried was the floating pound (#) sign hack which it turns out, much to my dismay, only works for Safari 2 and older. My efforts led me to CSS-discuss which led me to dithered.com who were kind enough to include a google custom search engine on their site which led me to theMechanism who got it from somewhere else … enough boring details already.

The solution looked thus:

@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari 3.0 and Opera 9 rules here */
}

It uses a CCS3 selector which is not necessarily entirely future proof although the -webkit portion is (according to rumour) not likely to be supported by other browsers … let’s hope the fix holds. The hack does work for Opera 9 too.

There are other minor bugs that I wish to fix on the site before revealing the url, would love to get some feedback from Safari 2 users though.