IE5.5 Custom Scrollbars


		Home \| Community \| Developer's Paradise \| Jobs User Groups \| Site Tools \| Site Information \| Search

Main Menu

IE5.5 Custom Scrollbars

-IE5.5 Custom Scrollbars
-Discuss this Article

Categories
Client User Group
HTML, CSS and XML, Internet Explorer
Language
No Script
Product
IE5
Task
Layout Enhancement, Scrollbar Control
Technology
CSS

Sponsored Links

Inside Technique : IE5.5 Custom Scrollbars
By Scott Isaacs

Internet Explorer 5.5 adds 8 new CSS properties for controlling the color of your scrollbars. Any scrollbar on your page can be customized simply by setting a few properties making it easy to give your page or site its own personality.

The best way to learn about these properties is to experiment with them. If you areusing IE 5.5, you can customize this pages scrollbars by entering colors for each of the properties below. If you create a scrollbar you like, just copy the small stylesheet to your web-page.

<STYLE>
  BODY {}
</STYLE>

Color	Attribute	Description
	scrollbar-3dLight-Color	Sets or retrieves the color of the top and left edges of the scroll box and scroll arrows of a scroll bar.
	scrollbar-Arrow-Color	Sets or retrieves the color of the arrow elements of a scroll arrow.
	scrollbar-Base-Color	Sets or retrieves the color of the main elements of a scroll bar, which include the scroll box, track, and scroll arrows.
	scrollbar-DarkShadow-Color	Sets or retrieves the color of the gutter of a scroll bar.
	scrollbar-Face-Color	Sets or retrieves the color of the scroll box and scroll arrows of a scroll bar.
	scrollbar-Highlight-Color	Sets or retrieves the color of the top and left edges of the scroll box and scroll arrows of a scroll bar.
	scrollbar-Shadow-Color	Sets or retrieves the color of the bottom and right edges of the scroll box and scroll arrows of a scroll bar.
	scrollbar-Track-Color	Sets or retrieves the color of the track element of a scroll bar.

Since these CSS properties are only supported by IE 5.5, they will be ignored by Netscape and earlier versions of Internet Explorer. To better isolate features that are browser-specific, we recommend you do not combine these attributes with others in a single rule. For example, if you want the text on your page to be NAVY and also want to define custom scrollbars, do it as follows:

<STYLE>
	BODY {color: navy}
	BODY {scrollbar-face-color: red}
</STYLE>

This separation will ensure that the navy text color will be applied to all browsers that support that CSS attribute. CSS defines that if an unsupported or invalid attribute is specified in a rule the entire rule should be ignored. Therefore, combining these two rules into one may cause the color to be ignored even if the browser support setting the color.

Discuss and Rate this Article