Inside Technique : Cool Rule Behavior
By Scott Isaacs

Back in April, 1998 we introduced a technique for using tables to create cool horizontal rules using nothing more than a table. Our technique worked in all browsers but required you to carefully author your horizontal rules in mind.

With Internet Explorer 5.0, we are able to create a seamless transition between the existing horizontal rules and our new cool rules by creating a behavior. Our behavior overrides the built-in rendering of the horizontal rule with a custom rule. All existing browsers continue to see the standard rule while Internet Explorer 5.0 users receive the enhanced rule. We demonstrate the cool rule behavior below. Internet Explorer 5.0 users will see our custom cool rule, while all other users see a standard HR element.

Adding the cool rule to your web-page is easy:

1. Download the coolrule.htc behavior.
2. Define the CSS to associate the coolrule with your HR elements. Below shows you how to replace all HR elements for when your page is viewed on the screen (when printed, the standard HR is used):

   <STYLE>
   <!--
   	@media screen
   	{
    		hr { behavior:url(coolrule.htc) }
    	}
   -->
   </STYLE>
   

3. When adding an HR tag to your page set the start color, end color. You can also optional define a width, height, and how many color steps you want. Experiment with the number of steps as sometimes you get better results with 8-16 steps than you get from a larger number.:

   <HR WIDTH=50 HEIGHT=3 STARTCOLOR="000000" ENDCOLOR="FFFFFF" STEPS=20>
   

Next we show you the code used to create the coolrule behavior.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.