Code to detect resolution not working in IE6

I'd be greatful to anyone who can help me correct the code for resolution detection for internet explorer6. Most of the following formats work for almost all browsers except IE6 . I'd appreciate any code that yu already have that is working.
Thanks everbody.
This format didnt work for IE6
<SCRIPT LANGUAGE="JavaScript1.2">
if (screen.height >= 600 && screen.width >= 800) {
document.write("<link rel="stylesheet" href="http://www.mysite.com/Css-folder/reduced-ie6.css" type="text/css">");
}
else {
if (screen.height == 768 && screen.width == 1024) {
document.write("<link rel="stylesheet" href="http://www.mysite.com/Css-folder/expanded-ie6.css" type="text/css">");
}
else {
document.write("<link rel="stylesheet" href="http://www.mysite.com/Css-folder/expanded-ie6" type="text/css">");
}
}
</script>

This code didnt make it either

<script language="JavaScript" type="text/javascript">
if(screen.width<=800)
{document.write("<link rel=\"stylesheet\" href=\"http://www.mysite.com/Css-folder/reduced-ie6.css\" type=\"text/css\"/>");}
else
if(screen.width<=1024)
{document.write("<link rel=\"stylesheet\" href=\"http://www.mysite.com/Css-folder/expanded-ie6.css\" type=\"text/css\"/>");}
else
{document.write("<link rel=\"stylesheet\" href=\"http://www.mysite.com/Css-folder/expanded-ie6.css\" type=\"text/css\"/>");}
</script

This code also failed

<script language="JavaScript" type="text/javascript">
if(screen.width<=800)
{document.write("<style type="text/css" media="all">@import url(http://www.mysite.com/Css-folder/reduced-ie6.css);@import url(http://www.mysite.com/Css-folder/reduced-ie6.css);<style type="text/css" media="all">@import url(http://www.mysite.com/Css-folder/reduced-fifo.css);@import url(http://www.mysite.com/Css-folder/reduced-fifo.css)</style>");}
else
if(screen.width<=1024)
{document.write("<style type="text/css" media="all">@import url(http://www.mysite.com/Css-folder/expanded-ie6.css);@import url(http://www.mysite.com/Css-folder/expanded-ie6.css);<style type="text/css" media="all">@import url(http://www.mysite.com/Css-folder/expanded-fifo.css);@import url(http://www.mysite.com/Css-folder/reduced-fifo.css)</style>");}
else
{document.write("<style type="text/css" media="all">@import url(http://www.mysite.com/Css-folder/expanded-ie6.css);@import url(http://www.mysite.com/Css-folder/expanded-ie6.css);<style type="text/css" media="all">@import url(http://www.mysite.com/Css-folder/expanded-fifo.css);@import url(http://www.mysite.com/Css-folder/reduced-fifo.css)</style>");}
</script>

This code worked partially(outcome was a deshaped look)

function setStyleSheet()
{ width = getTheWidthThatMatters();
height = getTheHeightThatMatters();
if(width<800 && height<600)
document.write("<link rel="stylesheet" href="http://www.mysite.com/Css-folder/reduced-ie6.css" type="text/css">");
return;
}
else
if(width<1024 && height<768)
document.write("<link rel="stylesheet" href="http://www.mysite.com/Css-folder/expanded-ie6.css" type="text/css">");
return;
else
document.write("<link rel="stylesheet" href="http://www.mysite.com/Css-folder/expanded-ie6.css" type="text/css">");
return;
}
setStyleSheet();

Your code has a flow of control bug.

Test your code for

screen.width == 1024
screen.height == 768


// this first if statement is true for those numbers. it will never get to the next if statement
if (screen.height >= 600 && screen.width >= 800) {
document.write("<link rel="stylesheet" href="http://www.mysite.com/Css-folder/reduced-ie6.css" type="text/css">");
} else {
if (screen.height == 768 && screen.width == 1024) {
document.write("<link rel="stylesheet" href="http://www.mysite.com/Css-folder/expanded-ie6.css" type="text/css">");
} else {
document.write("<link rel="stylesheet" href="http://www.mysite.com/Css-folder/expanded-ie6" type="text/css">");
}
}


try something like


if (screen.height <= 600 && screen.width <= 800) {
document.write("<link rel="stylesheet" href="http://www.mysite.com/Css-folder/reduced-ie6.css" type="text/css">");
} else {
if (screen.height == 768 && screen.width == 1024) {
document.write("<link rel="stylesheet" href="http://www.mysite.com/Css-folder/expanded-ie6.css" type="text/css">");
} else {
document.write("<link rel="stylesheet" href="http://www.mysite.com/Css-folder/expanded-ie6" type="text/css">");
}
}


By the way, in your second check you set the css file to either "expanded-ie6.css" for one resolution or "expanded-ie6" for everything else. Is that your intention? If so, I recommend changing the second file name to something more appropriate.

david_kw

Test your code for

screen.width == 1024
screen.height == 768

If checking for screen space with a vew to using that space somehow, then it's often better to check for available space. Certain OS screen components will sometimes take up sme of the total space, reducing what is available for things like app windows.

e.g.
screen.availWidth…
screen.availHeight…

However, in most cases, it's best to check the dimensions of the window itself, rather than the screen. A significant number of users do not have their browser windows at fullscreen.

e.g.
var winW = (window.innerWidth) ? window.innerWidth : document.body.offsetWidth;
var winH = (window.innerHeight) ? window.innerHeight : document.body.offsetHeight;

A more exhaustive check…
var winW, winH;

if (window.innerWidth) {
winW = window.innerWidth;
winH = window.innerHeight;
}
else if (document.body.clientWidth) {
winW = document.body.clientWidth;
winH = document.body.clientHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
winW = document.documentElement.clientWidth;
winH = document.documentElement.clientHeight;
}

You only need to include either the document.documentElement or document.body test as you can't have both a strict doctype and not a strict doctype on the same page. IE loads the first for a strict doctype and the second for a transitional, loose, or no doctype. Other browsers use innerWidth and innerHeight

You only need to include either the document.documentElement or document.body test as you can't have both a strict doctype and not a strict doctype on the same page. IE loads the first for a strict doctype and the second for a transitional, loose, or no doctype. Other browsers use innerWidth and innerHeight
I considered it simpler to show the more exhaustive method, which should work regardless of the render mode, than to add a mini lecture about triggering strict mode.

I prefer the first method that I posted, but then I can reliably predict which mode browsers will be in when I code...

var winW = (window.innerWidth) ? window.innerWidth : document.body.offsetWidth;
var winH = (window.innerHeight) ? window.innerHeight : document.body.offsetHeight;