Tips and Tricks: Chicago web design, copy writing, graphics, digital photography, database design, working with people, and getting a web project up and running.

Eye Candy  - or

Decorate Scrollbars Using IE in XHTML Strict Mode

category: CSS

If you decide you want to decorate your scrollbars (IE only, but that's 90% plus of anybody's traffic), and you're using the strict xhtml dtd so you can syndicate your blog or whatever, you can't use the CSS body tag to reference the scrollbar because it is nonstandard.

The work around is to refer to the body tag within the HTML tag. Here's what it looks like:

body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    line-height: 18px;
}

html, body {
    scrollbar-3d-light-color: #336699;
    scrollbar-arrow-color: #99CCFF;
    scrollbar-base-color: #003366;
    scrollbar-dark-shadow-color: #330033;
    scrollbar-face-color: #336699;
    scrollbar-highlight-color: #993366;
    scrollbar-shadow-color: #660033;
}
and so on...

Then just play with the colors until you get what you want. You almost have to see it work for this to make any sense, but here's an explanation of what these scrollbar colors mean:

scrollbar-3d-light-color: #color; the color on the outside providing the shading
scrollbar-arrow-color: #color; the arrow color
scrollbar-base-color: #color; the base color but is covered by all the other colors
scrollbar-dark-shadow-color: #color; shadow to the right of the scrollbar
scrollbar-face-color: #color; the color of the scrollbar
scrollbar-highlight-color: #color; color that goes immediately around the scrollbar
scrollbar-shadow-color: #color; provides the shadow in conjunction with the dark shadow

Try it; it's fun.

He said on 03.07.05 @ 01:37 PM CST