browser version dependant css javascript

[pagetta]

I have a 2 style sheets - one for IE6 and below, and one for everything else.

i am trying to use the following javascript:


<script language="JavaScript" type="text/javascript">
<!--

var browser=navigator.appName
var b_version=navigator.appVersion
var version=parseFloat(b_version)

if ((browser == "Microsoft Internet Explorer") && (version < 7.0)) {

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

}

else {

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

}
// -->

</script>


IE6 and below are picking up the correct style sheet, firefox and other browsers are picking up the correct style sheet, but IE7 is showing the styles_ie6.css design.

I am asssuming there is an error in my syntax - can anybody help with this?!

thank you

[bj]

Pagetta, why don't you just use conditional comments? They ALWAYS work since they were designed by MS to work, and the good browsers don't see 'em.

I give IE its own stylesheet this way in the head of the document, right before the /head tag:

<!--[if IE]>
<link rel="stylesheet" href="iestyle.css" type="text/css" media="screen" />
<![endif]-->

Inside that stylesheet I can feed IE6 and below the things it needs by using the * html hack like so:

* html sidebar ul a {
zoom: 1;
}

If I need to feed it to both IE6 and IE7, I leave off the * html and just declare for sidebar ul a.

Or you can create the conditional comment to feed only to IE6 and below by making the if statement read "if lte IE 6".

I've never had to, but if you need to you can feed IE7 its own stylesheet simply by including a second conditional comment with an if IE 7 statement (yes, that space between the IE and the 7 is deliberate.)

More on conditional comments here:

CSS - Conditional comments

[webmaster@pinecone.com]

My suggestion would be to dump out the values for browser, b_version and version to see what you're getting under IE7. Once you see the data, you'll have a better idea as to why the if statement is not working as expected.

[deepsand]

Originally Posted by pagetta

I have a 2 style sheets - one for IE6 and below, and one for everything else.

i am trying to use the following javascript:


<script language="JavaScript" type="text/javascript">
<!--

var browser=navigator.appName
var b_version=navigator.appVersion
var version=parseFloat(b_version)

if ((browser == "Microsoft Internet Explorer") && (version < 7.0)) {

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

}

else {

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

}
// -->

</script>

Try this:

In place of

if ((browser == "Microsoft Internet Explorer") && (version < 7.0))

use

if ((navigator.appName == "Microsoft Internet Explorer") && (navigator.appVersion.indexOf(”MSIE 7.”) == -1))

[pagetta]

thanks so much for your help with this. I treid all your solutions but either IE6 or IE7 wouldn't pick up the correct stylesheet depending what i tried - bj I tried that solution first but IE6 was having none of it. It would seem that after trawling through a LOT of ideas, that IE was having trouble with the decimal places and the only thing i found that would work was the following:


<script language="JavaScript" type="text/javascript">

browserversion=navigator.appVersion;

browserversion="0";
if (navigator.appVersion.indexOf("2.")!=-1) {browserversion="2"};
if (navigator.appVersion.indexOf("3.")!=-1) {browserversion="3"};
if (navigator.appVersion.indexOf("4.")!=-1) {browserversion="4"};
if (navigator.appVersion.indexOf("5.")!=-1) {browserversion="5"};
if (navigator.appVersion.indexOf("6.")!=-1) {browserversion="6"};
if (navigator.appVersion.indexOf("7.")!=-1) {browserversion="7"};

if ((navigator.appName=="Microsoft Internet Explorer") &&(browserversion < 7)) {
document.write( "<link rel=stylesheet type=text/css href=styles_ie6.css>")
}

else {
document.write( "<link rel=stylesheet type=text/css href=styles.css>")
}

</script>


I've no idea why the other things didn't work as i don't understand javascript enough, but this has done the trick

thank you for your help

[danlefree]

BJ's solution is definitely the most elegant (no need to make clients wait to parse the JavaScript before viewing the page contents).

If you placed the if IE block before your general stylesheet reference, the CSS property of accepting the last style definition may have reset your styles for the elements in IE6.

Perhaps give it one last try without the JavaScript?

<link rel="stylesheet" type="text/css" href="styles.css" />

<!--[if IE 6 ]><link rel="stylesheet" href="styles_ie6.css" type="text/css" media="screen" /><![endif]-->

[scotthai]

Hey Everyone,
I am a little late to jump on the band wagon, but here is some more food for thought. BJ is indeed the smartest when it comes to leaving the javascript out of the css style picking process, although the amount of users with JavaScript enabled is a majority, there are a lot of companies that disable JavaScript to protect against virus's (mainly those who believe that JavaScript is as powerful as Java) anyways conditional commenting is what BJ is talking about and it works, but you are all leaving out the important conditional.

<link rel="stylesheet" type="text/css" href="/directory/main.css" />
<!--[if IE6]><link rel="stylesheet" type="text/css" href="/directory/main_ie6.css" /><![endif]-->
<!--[if IE7]><link rel="stylesheet" type="text/css" href="/directory/main_ie7.css" /><![endif]-->

The reason this works so well is that every standards compliant browser sees the conditional comments as regular html comments and will by-pass them, IE6 will end and load the ie6 style sheet and IE7 will by-pass the first conditional comment since it is false and load the IE7 stylesheet. This uses no javascript logic and danlefree was right about the javascript pre-load. Someone could very easily write over one thousand lines of JavaScript if they wanted to sucessfully load a style sheet for every single browser and every single version of those browsers and all the while defeating the purpose behind why CSS was even invented. Its main purpose is to separate style from presentation and make it quick and easy to switch the appearance of a website. If you go overboard making a ton of style sheets you might as well start writing in HTML 3 forget XHTML and forge the use of CSS.

I would also advise against the *html hack and the +*html hacks, although they work well, your css will never be valid through the W3C.

Also to everybody, experiment with relative units (especially EM's) since the main pitfall to IE is the box model and the way that the browser reads pixel units. You can keep pixels where they are absolutely needed and for all text and everything else you can make it relative to the browsers font size. This allows for a fluid text increase and decrease on your page, the em's allow you to change text size in Internet Explorer and half the time you'll find yourself with one stylesheet that works on all browsers, (IE6+,Safari,Firefox - those are the only ones I really optimize for, trust your analytics reports and see what browsers are really being used and where you should really worry about spending your time on a project)

Cheers,
Scott Haines
Newfront Creative: Custom Graphic & Web Design - San Francisco Bay Area

[deepsand]

Originally Posted by pagetta

<snip> ... the only thing i found that would work was the following:


<script language="JavaScript" type="text/javascript">

browserversion=navigator.appVersion;

browserversion="0";
if (navigator.appVersion.indexOf("2.")!=-1) {browserversion="2"};
if (navigator.appVersion.indexOf("3.")!=-1) {browserversion="3"};
if (navigator.appVersion.indexOf("4.")!=-1) {browserversion="4"};
if (navigator.appVersion.indexOf("5.")!=-1) {browserversion="5"};
if (navigator.appVersion.indexOf("6.")!=-1) {browserversion="6"};
if (navigator.appVersion.indexOf("7.")!=-1) {browserversion="7"};

if ((navigator.appName=="Microsoft Internet Explorer") &&(browserversion < 7)) {
document.write( "<link rel=stylesheet type=text/css href=styles_ie6.css>")
}

else {
document.write( "<link rel=stylesheet type=text/css href=styles.css>")
}

</script>


<snip>

Since you really don't need to know the version of IE if it's other than 7, you can eliminate the checks for version 2 through 6, resulting in browserversion having a value of either "0" or "7." This will eliminate the time required to evaluate 6 statements.

Then, in addition, some small amount of time can also be shaved by replacing the test for browserversion being less than "7" with a test for it's being "0".

Or, better yet, replace the use of the intermediate variable browserversion and the test for its value with a direct test for the value of navigator.appVersion.indexOf("7.") itself being "-1".