CSS Hack for browsers using simple Javascipt

Have you been facing problems with css styling with different browsers
I faced one with the div width with IE and firefox
Here is a neat trick.

/* save the below code as css_browser_selector.js */

var css_browser_selector = function() {

var ua = navigator.userAgent.toLowerCase();

var h = document.getElementsByTagName(‘html’)[0];

var c = h.className;

if(ua.indexOf(‘msie’) != -1 && !(ua.indexOf(‘opera’) != -1) &&

(ua.indexOf(‘webtv’) == -1) ) h.className=’ie’+’

ie’+ua.charAt(ua.indexOf(‘msie’)+5)+’ ‘+c;

else if(ua.indexOf(‘gecko/’) != -1) h.className=(‘gecko ‘+c);

else if(ua.indexOf(‘opera’) != -1) h.className=(‘opera ‘+c);

else if(ua.indexOf(‘konqueror’) != -1) h.className=(‘konqueror ‘+c);

else if(ua.indexOf(‘applewebkit/’) != – 1) h.className=(‘webkit safari ‘+c);

else if(ua.indexOf(‘mozilla/’) != -1) h.className=(‘gecko ‘+c);



once done place this line of code between the  <head> and </head>tag  
/* <script src="css_browser_selector.js" type="text/javascript"></script> */

now place the desire css

<style type=”text/css”>
.ie .example {
width: 102px;
height: 100px;
.gecko .example {
width: 100px;
height: 100px;
.example {
background-color: black

Most of the css attributes work, give it a spin

I found a great article from rafael

Rafael Lima (http://rafael.adm.br)and 

got inspired to make this post as most of the time we face issues of width and placements etc

if you find the article useful do bookmark them

blinkbits BlinkList blogmarks co.mments connotea del.icio.us De.lirio.us digg Fark feedmelinks Furl LinkaGoGo Ma.gnolia
NewsVine Netvouz RawSugar Reddit scuttle Shadows Simpy Smarking Spurl TailRank Wists YahooMyWeb

Technorati Tags: , , , , ,

One thought on “CSS Hack for browsers using simple Javascipt

  1. I love the idea of this, but I was wondering how to call separate style sheets, as opposed to writing it all in line.

    Help with the syntax would be most appreciated.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s