Last week we re-launched the website of Copywriting Direct, a client that provides a wide array of writing services.

Technologies used: ModxCMS, jQuery, CSS3 and XHTML.

If you need any writing done, visit:

http://www.copywritingdirect.com

One day I was coding this site and found that the elements aligned perfectly except for this annoying 1px difference that appeared only in Safari and Google Chrome. So after many hours of Googling and lots of Coffee, I foung this online.

This was my mis-behaving code:

#rightmasthead, #leftmasthead {
float:right;
text-align: right;
margin: 33px 0;
padding: 10px 15px 0 0;
border:0px solid #000;
width: 300px;
}

Personally, I try to avoid using CSS hacks, and when writing client code I always assume that anything can be done the “proper” way.

However, in most cases a hack is useful and needed, so here are two hacks (which are, in fact a valid CSS) that can be used to target and distinguish Google Chrome and Safari:

@media screen and (-webkit-min-device-pixel-ratio:0) {
#rightmasthead, #leftmasthead {
margin: 32px 0; /* This works only in Safari and Google Chrome */
}
}

Viola it works now perfectly!