Cheatsheets: IE Scrollbar values

They're propietary, named incorrectly (MS should have put an '-ms-' in front of...), they don't validate and they're fun, scrollbar color values. Or rather, ain't it a pretty darn good idea ? We can argue about main window scrollbar, owned by browser or page designer, but for textarea, a <div> with overflow, it's pretty clear who should end up with control and make it something pleasant for the eyes - so we consider it an innovation :p. Usage, like this: 

body, textarea {
	scrollbar-base-color: #F96;
	}

Scrollbar-base-color is one tag revamping whole scrollbar (setting face-color and create "blended"/black 3D colors), not always very pleasantly, so combine others to get a decent look. Some great background by Brian Wilson.


Some subtilities to consider:

IE6, when page is having a proper <!DOCTYPE> (on first line of html), will stop displaying these values as set for the 'body' element. It will, however, display them for <textarea> and other occasions (overflow: scroll). What's more, you can still apply them at 'html' element and have them for the page as a whole (our IE .css file).

IE also has the annoying behavior where it will reserve spave for a scrollbar, when not needed, and display some garbled out flattened mess. To have nothing shown when not needed, set this in css for <textarea>: 

textarea {
	overflow: auto;
	overflow-x: hidden;
	}

Don't do this with 'body' and 'html', weird things happening in different browsers.

Other browsers

Besides Konqueror on Linux, now also Opera 7.x+ supports them. For early 7.x versions you may have to manually edit Opera6.ini or OperaDef6.ini. In [User Prefs] section, add a new line: "Enable Scrollbar Colors=1". Note that they'll only work inline, applied directly at the tag (style="") - that is, for things like textarea's above. They do work for whole page when applied to 'body' in css, but again - not with a proper <!DOCTYPE>. As such Opera users don't see anything on this page, and you could wonder about it being worth it…

If you can live omitting the <!DOCTYPE>, Opera has a small annoyance. When no scrollbar-track-color is set, Opera displays it plain white - but I don't want to define it for IE, I like the pixel-mix it displays of scrollbar-face-color and scrollbar-highlight-color. Solution, serve a solid scrollbar-track-color to Opera 7 only, method created by virtuelvis: 

@media all and (min-width: 0px){
	body {
		scrollbar-track-color: #533;
		}
	}

Disable them entirely

Some standards fundamentalists (evil grin :p) really oppose using these values, and present a way to disable them. Or maybe they annoy you because some sloppy web designers make them hard to use. In IE, go to Tools, Internet options, general tab, 'Accessibility' button. Check 'User stylesheet', then point it to a .css file containing this: 

html, body, textarea {
	scrollbar-face-color: threedface !important;
	scrollbar-shadow-color: threeddarkshadow !important;
	scrollbar-highlight-color: threedhighlight !important;
	scrollbar-3dlight-color: threedlightshadow !important;
	scrollbar-darkshadow-color: threeddarkshadow !important;
	scrollbar-track-color: scrollbar !important;
	scrollbar-arrow-color: buttontext !important;
	}