Pages don’t render 100% exactly the same on these browsers compared to Firefox, Opera and Internet Explorer – treat it as a completly new browser with its own quirks. Mainly pages render fine but tend to fail when positioning textual elements, as well as differences in the way padding works. Its weird, but you will see tiny errors which will bug the hell out of you in Chrome / Safari but don’t know how to fix.

Enter the Safari hack – shake this baby into line for we’ve got a hack coming and its not easy to remember, so best copy and paste this in your notebook for future reference (or bookmark this page).

Say you’ve got a class yourclass and you want to alter what happens in safari, its not playing ball, this is what you do:

/*\*/
html>body*.yourclass {padding:6px;font-size:13px;}
/**/

You can add additional elements within the comments to save your sanity:

/*\*/
html>body*.yourclass {padding:6px;font-size:13px;}
html>body*.yourborderclass {border-width:10px;}
html>body*.yourotherclass {padding:10px;}
/**/

Thats all for now, i hope it saves your sanity like it did mine, its not easy work hacking css, a designers life is not the easiest but this should help!

Share This

For the purists, look away now – for here is a dirty, low down css hack!

Basically, comments in CSS are handled differently, we all know that – i’ve found yet another (easier) way to hack IE that no-one else has noticed (?)

Here’s an example, this is a table that i’m styling, but the header doesn’t want to play ball in IE, so look at the line in the middle of the code:


.list th[scope=col] {
background: url(images/tablerowcol.png) repeat-x #F8F8F8;
color:#FFF;
//line-height:19px;
border-bottom: 1px solid #faa;
padding-bottom:0px;
}


Notice the // commented out line? It gets ignored on all browsers apart from every version of Internet Explorer. It does cause a warning to be shown in Mozilla Firefox if you have the web developer’s toolbar installed, but its non-intrusive and nothing pops up to say its an error.

Of course, this isn’t the purest method of getting cross-browser css compatibility, the ubiquitous CSS Reset is another way to get easier cross-browser satisfaction, with Yahoo and Google providing their own versions of the original hack by Eric Meyer.

Share This