Valid Coloured Scrollbars
Since coloured scrollbars via CSS are an extension to CSS by Microsoft, they will not validate. However, there are several methods one can use to have valid CSS and coloured scrollbards.
First, in your head, you can use either of these codes. Change stylesheet.css to the name of your stylesheet. Take out any scrollbar coding from your stylesheet and paste it into a new external stylesheet called scrollbars.css and upload it.
<style type="text/css">@import "stylesheet.css";
</style>
<!--[if gte IE 5.5]>
<style type="text/css">@import "scrollbars.css";
</style>
<![endif]-->
<LINK REL="stylesheet" HREF="stylesheet.css" TYPE="text/css">
<!--[if gte IE 5.5]>
<LINK REL="stylesheet" HREF="scrollbars.css" TYPE="text/css">
<![endif]-->Another method is via Javascript. Create and upload scrollbar.js containing this:
browser_version= parseInt(navigator.appVersion);
browser_type = navigator.appName;
if (browser_type == "Microsoft Internet Explorer" && (browser_version >= 4))
{
document.write('
<style type="text/css">');
document.write('html ');
document.write('{scrollbar-arrow-color: #FF9900;scrollbar-base-color: #000000;
scrollbar-dark-shadow-color: #DDDDDD;');
document.write('scrollbar-track-color: #DDDDDD;scrollbar-face-color: #DDDDDD;
scrollbar-shadow-color: #DDDDDD;');
document.write('scrollbar-highlight-color: #DDDDDD;scrollbar-3d-light-color: #DDDDDD;}');
document.write('</style>
');
}Change the colours to your colours. Then, put this into your head.
<script src="scrollbar.js" type="text/JavaScript"></script>Still another method: Create and upload scrollbar.htc containing this:
<?xml version="1.0" encoding="ISO-8859-1"?>
<public:component xmlns:public="urn:HTMLComponent" lightweight="true">
<script type="text/javascript">
//<![CDATA[
style.scrollbarArrowColor= "#FF9900";
style.scrollbar3dLightColor= "#DDDDDD";
style.scrollbarBaseColor= "#000000";
style.scrollbarDarkShadowColor= "#DDDDDD";
style.scrollbarFaceColor= "#BBBBBB";
style.scrollbarHighlightColor= "#DDDDDD";
style.scrollbarShadowColor= "#DDDDDD";
style.scrollbarTrackColor= "#DDDDDD";
//]]>
</script>
</public:component></pre>
<p>Add this to your head</p>
<pre><code><script type="text/JavaScript">
scrollbars= document.styleSheets[0].addRule("html", "behavior: url(scrollbars.htc)", 0);
</script>Lastly, one can use this method: copy and paste this into your head.
<script language="JavaScript" type="text/javascript">
<!--
function doscrolls(){
if (document.all && document.getElementById){
document.body.style.scrollbarFaceColor="COLOR";
document.body.style.scrollbarArrowColor="COLOR";
document.body.style.scrollbarHighlightColor="COLOR";
document.body.style.scrollbar3dlightColor="COLOR";
document.body.style.scrollbarDarkshadowColor="COLOR";
document.body.style.scrollbarTrackColor="COLOR";
document.body.style.scrollbarShadowColor="COLOR";
}
}
// -->
</script>After changing the word color to your color, change your body tag to this:
<body onload="doscrolls();">