Monday, 21 January 2013 13:56

dealing with CSS browser differences by javascript & css hacks

Written by 
Rate this item
(0 votes)

most developers have been facing the problem that pages
not appears same in different browsers.mostly internet
explorer makes problem than other browsers.

to overcome that probelm different style sheets for different
browsers is a good approach -

the following simple javascript can detect browsers and
choose the appropriate style sheet -

<script language="JavaScript">

bversion=parseInt(navigator.appVersion);

if (navigator.appVersion.indexOf('5.')>-1){

bversion=5

};

if (navigator.appVersion.indexOf('6.')>-1){

bversion=6

};

if (navigator.appVersion.indexOf('7.')>-1){

bversion=7

};

browsername='other browsers';

if (navigator.appName=='Netscape'){

browsername='NS'+version;

}

if (navigator.appName=='Microsoft Internet Explorer'){

browsername='MSIE'+version;

}

if(browsername == 'NS5'){

browsername='NS6'

};

//Internet Explorer

if (browser=='MSIE7') {

document.write('<link rel="stylesheet" type="text/css" href="/mie7.css">');

}
// set css file for other ie versions

//Netscape

if (browser=='NS4') {

document.write('<link rel="stylesheet" type="text/css" href="/nn4.css">');

}
//// set css file for other netscape versions

//other browsers

if (browser=='other browsers') {

document.write('<link rel="stylesheet" type="text/css" href="/others.css">');

}
</script>

you can also use the following comment for setting style sheet for
ie browsers instead of using javascript -

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

only ie browsers will understand this line and use the css file.but
other browsers will just ignore the line and use the default css file.

Read 1286 times
Super User

Email This email address is being protected from spambots. You need JavaScript enabled to view it.
Login to post comments