How to build multiple CSS style sheets for Different Browsers.

[TheBrownRecluse]

I'm kinda new to CSS, but I've been messing with it for off-and-on a month or so.

I've been having problems with CSS always being interpreted differently by different browsers (i.e. IE from everybody else). Is there ANY way, using a PHP script, to retrieve a CSS script based on the browser using it?

-Clif

[Webnauts]

Clif do you mean something like this? http://mikecherim.com/experiments/php_browser_sniffer.php

[Narasinha]

I'm kinda new to CSS, but I've been messing with it for off-and-on a month or so.

Welcome aboard the CSS merry-go-round, Cliff. I hope you enjoy the ride.


I've been having problems with CSS always being interpreted differently by different browsers (i.e. IE from everybody else). Is there ANY way, using a PHP script, to retrieve a CSS script based on the browser using it?

This is almost always a problem. In the past, many "hacks" and workarounds have been used to provide different parts of the CSS to different browsers. CSS support in Mozilla-based browser like Firefox is now very robust, as it is in Opera. Users of Opera and Firefox/Mozilla have traditionally been among the users most likely to upgrade to the latest version. IE always seems to present problems though.

My preferred method of handling this is to use conditional coments. This is supported in IE versions 5 and higher. The comments are treated as simply comments by browsers other than IE. You might read Arve Bersvendsen's article, Hack-free CSS for IE (http://virtuelvis.com/archives/2004/02/css-ie-only), or #IEroot — Targeting IE Using Conditional Comments and Just One Stylesheet (http://www.positioniseverything.net/articles/cc-plus.html) by Hiroki Chalfant for more information.

Yes, this still leaves out previous versions of IE, and it doesn't seem to address issues regarding IE for Macintosh, but it does help.

[TheBrownRecluse]

Clif do you mean something like this? http://mikecherim.com/experiments/php_browser_sniffer.php

I tried the php sniffer and it doesn't seem to work. I changed the file name extension to .php, I know I have the compoenents on my server. I don't know what I'm missing, and I followed the instructions.

[frogkettle]

I've been faced with this problem mysefl in so much as my template worked fine in FF, Safari, Opera & IE7 but not IE6 or below. In addtion I wanted to avoid any Javascript and I am not yet at a stage to implement PHP

What I did find was the addition of an underscore or fullstop to a CSS element where by the only browsers to recognise the fullstoped element would be IE7 (& below) and the underscored element would be only recognised by IE6 (& below) as such you could use the following to define a different element height between IE6, IE7 & all other makes of browser

p { height:100px; .height:200px; _height:300px; }

Unfortunatly I cannot remember the url for where I found this but I have implemented the underscored element in my template in a couple of places, to great effect, where the formating went a little too out of sync in IE6 & IE5

I am unsure if there is any longterm impact with using this method - I would be interested to hear from anyone who has encountered actual problems with this method

[DaveSawers]

Yuk! Better to do proper browser detection and have completely separate style sheets, See my reply to the other post on this topic: http://www.webproworld.com/graphics-design-discussion-forum/60561-php-code-switches-stylesheets-based-browser-viewing.html#post324562

[Drake]

I'd honestly suggest against browser sniffing because it's really not reliable when browser can so easily cloak themselves as other browsers (Opera comes to mind as a common example which loves to pretend to be IE).

Conditional comments are a strong solution for fixing minor issues with IE and that's what I'd suggest if IE is the only one you are having issues with.