Internet Explorer Scroll Bars
Normally I like to steer clear of proprietary coding but in this case I'll make an exception. Why? You may ask. It's because this is one type of proprietary coding that gives the developer more control over the over-all look and feel of their web pages. Nothing quite like being able to easily control the color of part of the browser itself to match the color scheme of the page being displayed in it. That and I just like it. I wish browser manufacturers would give us web designers much more control over the appearance of the browser to better match our pages. Just seems right. Well, maybe someday I say wishfully.
scrollbar-3dLight-Color:#FF6666;
scrollbar-Highlight-Color:#66FF66;
scrollbar-DarkShadow-Color:#FF0000;
scrollbar-Shadow-Color:#00FF00;
scrollbar-Face-Color:#1573B4;
scrollbar-Base-Color:#AA0000;
scrollbar-Arrow-Color:#FFFFFF;
scrollbar-Track-Color:#BDD8EA;
}
Note above that you must use the body selector for declaring any of these styles even though they are more a part of the browser chrome than the document body. Also you must be using a browser that supports them to see what they do. They were developed by Microsoft for Internet Explorer but also work in modern versions of the Opera browser. If you are using any of these browsers to view this page then you can see these style effects on the scroll bar to the right. They'll also effect the bottom scroll bar if your page uses one.
The 3dLight style controls the color of the top and left outer borders of the scroll bar and arrow buttons. I colored them a light red on this page. The Highlight color is for an inner border of the same areas which I've colored a light green.
The DarkShadow style controls the color of the bottom and right outer borders of the scroll bar and arrow buttons. I colored them red on this page. The Shadow color is for an inner border of the same areas which I've colored green.
The Face style controls the color of the scroll bar and arrow buttons. It will produce a lighter shade of the same color in the scroll bar track if no color is set for it. And it sets no color for any of the inner or outer borders. I colored them a blue shade on this page. The Base color is about the same except it will also color the outer borders. I didn't use this one on this page since the Face and 3dLight cover up any effect it would have had. Just Face and Base used together can be enough to achieve your desired results.
The last two, Arrow and Track control just what you would think they would. I've colored them white and light blue respectively on this page.
One interesting thing to note here is that I could not get any of these to work on this page even if I copied and pasted them from a page they did work on. That is until I commented out my <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> definition at the top of my page. Don't ask me why it stopped things. Maybe the styles aren't compatible with XHTML transitional. Not the first time !DOCTYPE has done something like this.
That's pretty much it for scroll bars. Most web designers never seem to use them. I use them when I think they will add to the overall look and feel of the page. I did not use them on the rest of the pages in this tutorial so you can see the difference on this page from the other, browser controlled pages. Nice thing about them is they do nothing bad to browsers that don't support them, they're just ignored.
