How do I use javascript to load different css pages depending on the veiwers browser.

I have Done so research on the Internet but I cant get it to work right.

I want one page that loads for Firefox and another that loads for all other browsers.

Do a search for

'browser detection' + javascript

That should give you everything you need.

Do you mind if I ask what you specifically want to show only to Firefox users? If it's just a way to make something display better on FF there's probably an easier and better way to accomplish it.

So far I have only tested my site on firefox, aol, and IE and It appears how I want it to on IE and AOL, but different in Firefox so I want to load a different page with the corrections in the CSS to make It work In Firefox.

somthing like this should work:

<SCRIPT language=”JavaScript”>
var browserName=navigator.appName;
if (browserName==”Microsoft Internet Explorer”)
{
//load ie friendly stylesheet
document.write(’<link rel=”stylesheet” href=”/stylesie.css” type=”text/css”>’)
}
else
{
if ((parseFloat(navigator.appVersion)) >= 5 )
{
// if ns version is great than or equal to 5 (6) load this stylesheet
document.write(’<link rel=”stylesheet” href=”/stylesie.css” type=”text/css”>’)
} else {
//if you have a really ancient browser (ie. NS 4.7 or earlier) load this stylesheet
document.write(’<link rel=”stylesheet” href=”/stylesns.css” type=”text/css”>’)
}
}
</SCRIPT>

however i would recommend u read and follow this site:
http://www.thesitewizard.com/css/excludecss.shtml

it should be of great help

I had a hunch that might be what you were trying to do. Post the code or a link to the page and I'm sure we can help getting the css right to display well across browsers. It's better approach.

When developing I find it's easiest to code to the standards and get things working in Firefox first. Periodically check how the page looks in IE and make a few fixes. In the end you shouldn't need to have more than a half dozen to a dozen lines of css that need to be different for the different browsers (mainly IE) and the best way to deal with them is through conditional comments.

i agree, its always better to work with fire fox 1st then sort out those few annoying bugs with ie

Here is my css code.

body{
background:#EDEEEE;
margin:9px;
}
div.level0{
background:#25587E;
position:relative;
}
div.level1{
background:#EDEEEE;
margin-left:145px;
padding-left:9px;
}
div.level2{
background:#4070AE;
position:relative;
}
div.level3{
background:#EDEEEE;
margin-right:145px;
padding-right:9px;
}
div.main{
background:#CCC;
}
div.header{
background:#41627E;
border-left:thick solid #25587E;
border-right:thick solid #25587E;
border-top:thick solid #25587E;
}
img.header{
width:100%;
}
div.title{
background:#4070AE;
margin-top:9px;
text-align:center;
color:#FFFFFF;
font-variant:small-caps;
font-weight:bold;
font-size:140%;
}
div.subtitlefloat{
background:#25587E;
margin:9px 184px 0 9px;
padding-left:55px;
text-align:left;
color:#FFFFFF;
font-variant:small-caps;
font-weight:bold;
font-size:110%;
}
div.subtitle{
background:#25587E;
margin:9px 9px 0 9px;
padding-left:55px;
text-align:left;
color:#FFFFFF;
font-variant:small-caps;
font-weight:bold;
font-size:110%;
}
div.loginBox{
float:right;
width:175px;
background:#4070AE;
position:relative;
}
div.lftBar{
position:absolute;
width:145px;
top:0px;
left:0px;
}
div.rgtBar{
position:absolute;
width:140px;
top:0;
right:0;
border-left:5px solid #25587E;
}
div.rgtSubtitle{
background:#25587E;
padding-top:3px;
padding-bottom:3px;
text-align:center;
color:#FFFFFF;
font-variant:small-caps;
font-weight:bold;
font-size:110%;
}
div.topNavBar{
background:#25587E;
border-bottom:4px solid #4070AE;
}
ul.topNavBarul{
margin:0;
margin-left:40px;
list-style-type:none;
width:100%;
}
li.topNavBarli{
text-transform:uppercase;
display:inline
}
a.topNavBaraCurrent{
float:left;
margin:2px;
padding:2px;
display: block;
color:white;
text-decoration:none;
font-weight:bold;
font-size:105%;
background-color:#4070AE;
border-bottom:4px solid #4070AE;
}
a.topNavBara{
float:left;
margin:2px;
padding:2px;
display:block;
color:white;
text-decoration:none;
font-weight:bold;
font-size:105%;
background-color:#41627E;
border-bottom:4px solid #25587E;
}
a:hover.topNavBara{
background-color:#736F6E
}
div.rgtNavBar{
background:#4070AE;
margin:0;
}
ul.rightNavBarul{
width:100%;
margin:0;
list-style-type:none;
text-transform:uppercase;
}
a.rightNavBaraCurrent{
margin-top:4px;
margin-bottom:4px;
padding:2px;
display: block;
color:white;
text-decoration:none;
font-weight:bold;
font-size:105%;
background-color:#25587E;
text-align: left;
}
a.rightNavBara{
margin-top:4px;
margin-bottom:4px;
padding:2px;
display: block;
color:white;
text-decoration:none;
font-weight:bold;
font-size:105%;
background-color:#41627E;
text-align: left;
}
a:hover.rightNavBara{
background-color:#736F6E
}
div.bottomNavBar{
background:#25587E;
margin:9px 9px 0 9px;
}
ul.bottomNavBarul{
margin:0;
margin-left:40px;
list-style-type:none;
text-transform:uppercase;
width:100%;
}
li.bottomNavBarli{
display:inline;
float:left;
color:#FFFFFF;
}
a.bottomNavBara{
margin-left:5px;
margin-right:5px;
padding:1px;
color:#FFFFFF;
text-decoration:none;
font-size:95%;
}
div.copyrightBar{
background:#CCC;
margin-left:9px;
margin-right:9px;
padding-left:75px;
}
div.randomhomemade{
background:#4070AE;
margin-top:9px;
margin-left:9px;
margin-right:9px;
padding-left:9px;
padding-right:9px;
padding-bottom:9px;
text-align:center;
color:#FFFFFF;
text-decoration:none;
font-size:90%;
}
img.randomhomemade{
width:100%;
}
div.aboutus{
background:#4070AE;
margin:9px;
padding:2px;
text-align:left;
color:#FFFFFF;
text-transform:uppercase;
font-size:80%;
}
div.aboutustitle{
background:#41627E;
padding:2px;
text-align:center;
color:#FFFFFF;
font-weight:bold;
font-variant:small-caps;
font-size:100%;
}

From Now on I will make the code to work with Firefox first.

I usually find it's easiest to code with both IE and FF (and now Safari for Windows) open. That way, if I can nail all three of those at once, then I'll be fine.

James, if your issues are IE-specific, you may want to look at conditional comments. Conditional comments are viewed and processed by IE (you can even make it version-specific) while the other browsers ignore them completely.

Try to avoid going that route if you can, though. It gets messy if you're not careful.

Actually I do the same or at least similar as Adam. I use a lot of extensions for Firefox while developing so that's the one that's primarily open, but I do check in IE after each section of code I write and it's never more than a click away.

Why don't you use conditional comments? The main rendering differences are those between modern browser and Internet Explorer...

Tudor.b: that was already suggested...and he implemented them.