Like many of you, I have been designing Web sites and Web applications for quite some time now. And it's been mostly fun.... although, at times it's been frustrating with browser and version incompatibilities. Over time I have learned a few design tricks that I'd like to share with you. Mind you, that these are not all my tricks, so I can't take all the credit. Some I have learned from other Web page designers (by looking at their HTML source, of course) and some I have learned because of time constraints and my own laziness :-) I just hope these will be useful to you in your design endeavors.
Before I start, I want to warn you that these tricks don't work on all browsers... especially Netscape. However, they degrade gracefully and your pages will not break.
Tip 1. Creating Colored Horizontal Rules
You can write:
<hr size="2" color="#000099">
If you are using IE, you will see a single-pixel blue colored line above. If you are using Netscape, you will just see a regular horizontal rule. As you can see, the code degrades gracefully on browsers that don't support the COLOR attribure, but enhances the design for IE browsers.
Now, if you really want a blue horizontal rule to show up in other browsers, you can try the following HTML code:
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td height="2" bgcolor="#000099"><spacer type="block" height="2"></td>
</tr>
</table>
With this code, you will see a blue horizontal rule no matter what browser you are using; see the blue line below:
Tip 2. Changing Cursor Shapes
If you are familiar with style sheets, you know that CSS allows you to change the cursor type. Some of the cursor shapes that we can use are listed below:
One that I've used often is cursor:help. I use it mainly for applications that provide context-sensitive field level help. At least users with the IE browsers get an idea of the link type and the nature of help they are going to get. In the example below, move your cursor over the label 'User Name.' If you're using IE4 and above, you will see an pointer with a question mark over it.: