WebReference.com - Pure CSS2 Rollovers | WebReference

WebReference.com - Pure CSS2 Rollovers

Pure CSS2 Rollovers

In The Evolution of Rollovers we chronicled the development of rollovers over time. After much feedback, and countless iterations we believe we have perfected the pure CSS2 rollovers we demonstrated within this article. This new directory will house our finalized CSS2 rollovers.

What follows are demonstrations of pure CSS2 rollovers that gracefully degrade. The following rollovers display similarly (no rollover) in Netscape 4.x, and for CSS2 capable browsers provide a vertical rollover menu using the hover pseudo-class, without the use of images. After extensive testing, we've arrived at a solution that works for all the browsers we tested, using the link import method for style sheets.

You can optionally use the @import method if you add problematic CSS2 commands for Netscape 4 safety.

Vertical Rollover Demos

Demo 2 - link method, Tantek hack
Uses a fixed width DIV surrounding block-level links with margins/width100%/padding, and a Tantek.com box model hack to change everything but IE6 back to "auto" on link widths due to box model differences (html>body div.menu a {width:auto;}). Works on all browsers we've tested.
Demo 2a - link method, span hack
Same as above, but shunts the padding into spans that surround the link href text. This allows us to omit the html>body hack, while still surrounding the link text with padding and not changing the look in IE4/NS4. More CSS/code but it works. Thanks to Dan Ragle for this one.
Demo 2b - link method, no Tantek hack, auto for width
This is Demo2 with an "auto" for A width, the default. This should work everywhere, but may make IE6 only rollover the links, not the entire box. Other browsers rollover entire box. Avoids Tantek hack and is what Eric Meyer uses at Meyerweb.com.

What We Learned

When creating new CSS1/2 gizmos, test the heck out of them. The differences between browsers is still something you must deal with. Developers generally take one of two approaches to accommodate Netscape 4.x browsers:

  1. Ignore Netscape 4.x with @import
  2. Offer degraded version for Netscape 4 with link rel

We chose the more difficult path (2), and think we've succeeded, at least with our vertical menu. As for the CSS, don't use percentage widths for a menu DIV, as at small screen sizes the text will overlap. You'd think that using relative "em" widths would solve the overlap problem, but alas, Netscape 6 doesn't auto-expand our DIV with an "em" width, though IE5+ does beautifully. We settled on a fixed width for the surrounding DIV, overridden by the Tantek.com hack to reset it to "auto" for all but IE6. Here's demo2.css:

body {background:#fc0;}
h4 {margin:0;padding:0.3em;text-align:center;}
div.menu {
    border:1px solid #000;
div.menu a {
    border-top:1px solid #000;
html>body div.menu a {width:auto;}
div.menu a:hover {background:#fc0;color:#00f;}

Note that we surround our links with a fixed width bordered DIV, which encloses our block-level links. The outside border is taken care of by the enclosing DIV, and the border-top style on the block-level links takes care of the interior borders.

<div class="menu">
    <a href="/dhtml/">DHTML <br></a>
    <a href="/graphics/">Graphics <br></a>
    <a href="/js/">JavaScript <br></a>
    <a href="/xml/">XML <br></a>

Note also that we position our line breaks (<br>) within our A HREFs, because putting it outside creates a gap in some browsers. With the line break inside the A HREF it is "gobbled up" by the link block. You can set a fixed width for your block element links, and the text will wrap automatically when users increase their font size. If you set white-space:nowrap; for the links, even with relative "em" widths, in Netscape 6 the link text will extend over the borders.

2a moves the problematic padding (when combined with width in one element) to a surrounding SPAN and completely avoids the problem, eliminating the need for the Tantek hack, but adding more code.

div.menu span {
<div class="menu">
    <a href="/dhtml/"><span>DHTML <br></span></a>
    <a href="/graphics/"><span>Graphics <br></span></a>
    <a href="/js/"><span>JavaScript <br></span></a>
    <a href="/xml/"><span>XML <br></span></a>

2b omits the width, and the Tantek hack (both in red), and works well, except on IE5 and IE6 the rollovers only occur over the links, not the entire block. This is the method Eric Meyer uses on his rollovers at his CSS Edge site.

There are, of course, other ways to accomplish the same look with CSS1/2 (the borders for instance). But this is the method that we found to work the best. -1px margins, and voice hacks were not found to be reliable using all the browsers we tested.

Related Links

By Andy King, and thanks to Kwon Ekstrom, Shirley Kaiser, Rogelio Vizcaino Lizaola, Eric Meyer, and Dan Ragle.

Revised: April 3, 2002