different css style for different browser

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
malcolmboston
DevNet Resident
Posts: 1826
Joined: Tue Nov 18, 2003 1:09 pm
Location: Middlesbrough, UK

different css style for different browser

Post by malcolmboston »

im mainly targeting IE and FF for my current site which is completely CSS based and have went unhitched until dealing with absolute positioned div...

basically i need :

left: 724px; in FF to achieve perfect layout
left: 732px; in IE to achieve perfect layout

is there any simple code to make each code run by different browser, i understand from a colleague that !important does this...any more info would be great

Thanks
Mal
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

The best way is serve the IE's their own stylesheet:

Code: Select all

<link rel="stylesheet" href="/css/style.css" type="text/css" media="screen" />

<!--[if IE 6]>
<style type="text/css" media="screen">
@import "/css/ie.css";
</style>
<![endif]-->

<!--[if IE 5]>
<style type="text/css" media="screen">
@import "/css/ie5win.css";
</style>
<![endif]-->
Then you can add whatever you want in those stylesheets. Certainly with the upcoming IE7 I wouldn't go with hacks in your main stylesheet anymore. If all hacks or workarounds for ie 5 and 6 are in their own stylesheet, seeing what's going on is easy. Also, when it's time to say goodbye to IE5 (soon) of 6 (unfortunately not so soon) it's simply a matter of removing the stylesheet.

[added:]p.s.: there are more ways to use these conditional comments, like <6 or <=6, etc. Google for conditional comments and css and you'll find plenty of info.
asgerhallas
Forum Commoner
Posts: 80
Joined: Tue Mar 14, 2006 11:11 am
Location: Århus, Denmark

Post by asgerhallas »

see maybe this script for the browserdetection i PHP

http://techpatterns.com/downloads/browser_detection.php

/Asger
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

I'm not so sure if a javascript browser detection method is a wise choice. It's worse enough we have to use those conditional comments, but considering the IE specific bugs and 80% of the population using IE we have little choice. But at least it's officially recommended by M$. Well, and sometimes it's possible to design without any hack or workaround.
asgerhallas
Forum Commoner
Posts: 80
Joined: Tue Mar 14, 2006 11:11 am
Location: Århus, Denmark

Post by asgerhallas »

I agree... Javascript browser detection is not a good idea. But the above link is a script for a server side PHP detection.

But yes conditional comments will do the trick here... but they only work for IE/win, so for any other browser IE/mac for example you would have to find another way. I find the server side detection the cleanest - and it will work even though javascript is not enabled.
Post Reply