Google Chrome Specific Stylesheet

[limelites]

Is it possible to create a Google Chrome specific stylesheet?

Also, would be nice to have a Safari and Opera specific stylesheet too.

Site I'm working on is www.superfancy.co.uk, which as you will see is not quite lining up the same in all browsers..... we're talking a few pixels, but it looks bad on the horizontal background bar.

I am using the ie specific stylesheets from the download area, but I don't have a clue how to create Chrome, Safari and Opera specific sheets. Any help will be hugely appreciated.

[limelites]

I found a way to add Chrome and Safari specific styling to your site. Just add this to the bottom of your stylesheet.css file:

@media screen and (-webkit-min-device-pixel-ratio:0) {
/* the CSS styling below will only be picked up by Safari and Chrome */

body {
background-image: url("../images/back-ground-vertical-safari.jpg");
}

} 

Now, does anyone have a similar workaround for Opera?

[rstevenson]

I'm sure you know, but for any others reading this thread, a Note: This hack uses a CSS3 class that is currently supported only by Safari and by recent versions of Opera, and then uses clever formatting of the @media query to rule out Opera. Nice trick! But other browsers, whenever they start to support that CSS3 class, may suddenly pick up your hack. Perhaps this will be fine, but perhaps not, so if you use this hack you need to remember where you used it and to check each browser version as it comes out to see if it is affected by it.

If I were me, I'd use Javascipt browser sniffing instead. I believe it's possible to sniff out all browsers and versions that way. You might be worried about people browsing with javascript turned off, but if they're doing that, a few pixels difference in a layout will be the least of their problems these days. ;-)

Rob

[Kim]

Uh ... this is OT - but do you realize you have a horizontal scroll bar in a window that less than 1400 and some pixels?

(and BTW your background doesn't line up in FireFox on my computer)

[rstevenson]

Also, viewing the page source, you have extra head and body code down at the bottom. Maybe that is the source of the problem.

Rob