Tech Info - The Story so far

This page explains our first wave of revised CSS use - how and why we did it.

• Text Rollover Effects

• Pop-Up/Down Rollover Effects

• Tables vs Div & CSS

• Pure CSS Menus

Text Rollovers

The roll-overs on the left and right hand menus on this page use CSS2 definitions. They both use a site-wide class style so during our layout transition we needed to limit the scope to newly formatted pages only. CSS2 provides fantastically powerful selectors for just this purpose, so modified pages enclose the areas we want to effect in a 'div' with appropriate rules. The CSS and HTML for the left hand navigation looks like this.

<style type="text/css">
<!--
/* CSS style sheet fragment */
/* suppress effects for all A tags */
a {text-decoration:none;}
/* silver color in A tags + class="n-l-f" */
.n-l-f a {color:silver;} 
/* annoying underline feature on all A tags! */
a:hover {text-decoration:underline;} 
/* text black inside div + class="n-l" when user hovers */
div.n-l a:hover {color:black;}
//-->
</style>

<!-- HTML LEFT MENU fragment -->
<div class="n-l">
<p class="n-l-f">
<a href="">tech home</a><br />
</div>

Those of you lucky enough to have a decent browser (Gecko or Opera 7.x, but NOT MSIE) will see that the left menu also stays in position as you scroll down the page. This is done using in 'n-l' class definition as shown below:

.n-l {
	position:fixed;
	top:60px;
	left:6px;
	}

The magic is 'position:fixed' which is a standard CSS2 extension to 'position' (not currently supported by MSIE) and which locks the element to which it is applied ('div' in this case). There are 50 line Javascript functions that do the same thing!

The right hand menus use a similar technique but with a different class name ('g-sb') applied to a 'div' so that we can apply a different effect. Use 'view source' to see all the detail.

Pop-Down, Pop-up Rollovers

The pop-downs on this page (on the top navigation bar) may be either CSS or Javascript depending on your browser but use CSS to create the rollover effect as you run down the menu. This one is a bit messier. The problem with the javascript version is we want the rollover to be applied to the whole of the table cell not just the text in the A tag. The following uses another 'newish' CSS feature (this one is supported by MSIE!!).

<style type="text/css">
<!--
/* CSS style sheet fragment */
/* see text roll over for explanation of these */
a {text-decoration:none;}
.n-l-f a {color:silver;} 
a:hover {text-decoration:underline;} 
div.n-l a:hover {color:black;}
/* POP-DOWN EFFECTS */
/* basic class attributes - nothing special */
.n-p-n {
	background:#EEE;
	color:blue;
	font-size:9pt;
	text-indent:6pt;
	}
/* forces block mode - whole width */
.n-p-n a {
	text-indent:6px;
	display:block;
	text-decoration:none;
	}
/* defines the rollover effect */
.n-p-n a:hover {background:#CCC;}
//-->
</style>

<!-- HTML POP-OUT MENU fragment -->
<table width="110" summary="" border="0" cellspacing="2" 
cellpadding="0" class="n-p-n">
<tr align="right">
<td><a href="">tech home</a></td>
</tr></table>

The technique is similar to the previous roll-overs described except for the use of 'display:block;' which causes the element to be treated as a block and in this case to cover the entire table cell block element not just the text as would normally be the case.

Tables vs Div & CSS

Like a lot of folks we started HTML writing in the early 90's by looking at web pages, buying a 900 page book (which apart from acting as a door stop proved useless after 3 days), and searching the web. Tables were the standard technique and we blindly followed since it appeared to do what we wanted. When CSS came along we adopted it but never really changed our point of view so we used it as an adjunct to our table designs. And they worked. Here was how we defined our left hand navigation table until we saw the CSS light.

<style type="text/css">
<!--
/* PRE-LIGHT BULB CSS style sheet fragment */
/* annoying underline feature on all A tags! */
a:hover {text-decoration:underline;} 
.n-l-f {
	font-family:Verdana, sans-serif;
	font-size:8pt;
	text-decoration:none;
	background:white;
	color:silver;
	margin:2px;
	}
//-->
</style>

<!-- TABLE BASED HTML LEFT MENU fragment -->
<table width="110" summary="" border="0" cellspacing="2" 
cellpadding="0" class="n-l-f">
<tr align="right">
<td><a href="">tech home</a></td>
</tr></table>

It works fine but here is what we do now to create a CSS 3 column liquid layout.

<style type="text/css">
<!--
/* POST-LIGHT BULB CSS style sheet fragment */
/* suppress effects for all A tags site-wide */
a {text-decoration:none;}
/* silver color in A tags + class="n-l-f" */
.n-l-f a {color:silver;} 
/* annoying underline feature on all A tags! */
a:hover {text-decoration:underline;} 
/* text black inside div + class="n-l" when user hovers */
div.n-l a:hover {color:black;}
.n-l {
	font-family:Verdana, sans-serif;
	position:fixed;
	top:60px;
	left:6px;
	width:110px;
	}
.n-l-f {
	font-size:8pt;
	margin:2px;
	line-height:150%;
	}
//-->
</style>

<!-- HTML LEFT MENU fragment -->
<div class="n-l">
<p class="n-l-f">
<a href="">tech home</a><br />
</div>

Big deal. So whats the difference.

The style sheet is slightly bigger but the HTML is a lot smaller and a lot more controllable. And we think we've started to separate style from content - Hey give us a break, at least we're starting to think about it.

• The 'table' has been replaced with a 'div'. Our 'div' style definition contains attributes that we think we will always want to control at this level e.g. 'width', font-family etc. even if we get this wrong its a small change in one location. As a simple side-benefit we're also eliminating all those nested cell/row/table end bugs that are so much fun to find.
• The 'n-l-f' contains attributes that affect the local text/page elements e.g. 'font-size', margins, padding etc. (note: the 'line-height' attribute replaces the 'cellpadding' attribute of the table and gives us much finer control.

Conclusion So are tables bad. As a page layout layout method - probably yes. For controlling content presentation within layouts they are and will continue to be indispensable. "Don't throw the baby out with the bath-water" as everyone's Granny used to say!

---

Problems, comments, suggestions, corrections (including broken links) or something to add? Please take the time from a busy life to 'mail us' (at top of screen), the webmaster (below) or info-support at zytrax. You will have a warm inner glow for the rest of the day.