Forum Moderators: not2easy

Message Too Old, No Replies

Different css for different browser

How to use a different css file for each browser.

         

spitos

5:04 pm on Jun 21, 2006 (gmt 0)

10+ Year Member



Please can someone instruct me on how to use a different css file for each of the main browsers? Also it needs to detect which browser they are using first!

My site works as expected in IE6, the pages look different in both firefox and opera as well as IE.
I use a cgi based shopping cart and I would preferrably like a cgi script to do this rather than javascript.
I have tried using one script I found whilst searching but it doesn't work... seems like some code is missing.

Any help is greatly appreciated :)

DanA

7:41 pm on Jun 21, 2006 (gmt 0)

10+ Year Member



Why don't you use a stylesheet for all compliant browsers and add the fixes for IE into conditional comments?
Conditional comments will target MSIE only and are much more reliable than any browser detection script.
If you really want to have two independant stylesheets, you can also use conditional comments : google for "valid conditional comments".

Robin_reala

9:22 pm on Jun 21, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Agreed - down the route you're proposing lies madness. Really, the vast majority of stylesheets will work just fine on Safari, Firefox and Opera, and with a little tweaking IE6. If you've got major IE bugs then you can serve an IE only stylesheet as well to cope with them.

spitos

11:59 pm on Jun 21, 2006 (gmt 0)

10+ Year Member



Yeah I have heard that serving different stylesheets is not reliable...

Where can I get these IE fixes to do some testing?
Unfortunately, when applying the css I tested with IE, I only later found out that was bad move #1 :)
I thought the alternative stylesheets was my only way out!
There is one specific problem in IE that's really bugging me:
My center div content occasionally shows at the bottom of the page under the left div.
When I refresh the page it then displays as normal.
Google has cached some pages with the content at the bottom left, instead of where it should be!
Will this be corrected using a fix or do you think I have made a mistake somewhere in my css file or page code?

My pages also look different in opera than they do in firefox.
Firefox displays my center div content slightly to the left of where I want but no big problem...
Opera displays my center div underneath the left div.
If I edit my stylesheet to make it right in one browser, it makes the other change to a worse state.

Cheers guys.