Even after many years of hacking up HTML pages it surprises me when I discover some new tricks. Or even better old tricks than now work how you expect them to! One of the great things about the forthcoming IE7 release (currently at "Release Candidate 1") is how it's adding a lot more consistent and correct support for CSS. Things like the hover attribute now work everywhere, not just on address links. Now if only Safari would implement the <label for="{id}>label text</label> I'd be happy (oh and if the CSS folks could trouble themselves to come up with a decent 'float:bottom;' type solution for site footers/copyrights that doesn't involve too much fiddling around).

Anyway, I digress. The two old yet new goodies I found (while, as usual, hunting for something totally unrelated) are firstly the <optgroup> sub-element for a <select>... it allows you to group related items together while not itself being selectable

<select>
	<optgroup label="Sites">
		<option value="s01">BigBrother</option>
		<option value="s02">ClubAV</option>
		<option value="s03">AMD Means Business</option>
	</optgroup>
	<optgroup label="Clients">
		<option value="ess">Endemol Southern Star</option>
		<option value="csa">Cat Savard Advertising</option>
		<option value="zzarg">Zzarg Advertising</option>
	</optgroup>
</select>
appears in the browser as:

 

The next discovery is the <fieldset><legend> pairing. This allows you to create a block of related fields with a common boundary. And it's stylable with CSS. In fact, with the new IE7 style capabilities you can even change the look when it has focus

Log In:

So how did we create this? First of all the basic HTML 
<fieldset>
	<legend>Log In:</legend>
	<label for="un">User Name:</label> <input id="un"> 
	<label for="pw">Password:</label> <input id="pw" size="10">
</fieldset>
and then some simple stylesheet magic 
<style>
fieldset {
	width: 450px;
	border-top: 1px solid #efefef;
	border-left: 1px solid #efefef;
	border-bottom: 1px solid #cccccc;
	border-right: 1px solid #cccccc;
	padding: 1em 1em 1em 1.5em;
}
fieldset:hover {
      border: 1px solid #ABC2EC;
    }
</style>

 

It all goes to show... you can teach an old dog new tricks. And it's even better when the tricks are actually old ones, that now just happen to work fine!