|
|
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.
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:
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 {
width:125px;
background:#fff3ac;
padding:0;
margin:1em;
border:1px solid #000;
}
div.menu a {
display:block;
margin:0;
width:100%;
padding:0.3em;
font-weight:bold;
border-top:1px solid #000;
color:#00f;
text-decoration:none;
}
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">
<h4>Experts</h4>
<a href="/dhtml/">DHTML <br></a>
<a href="/graphics/">Graphics <br></a>
<a href="/js/">JavaScript <br></a>
<a href="/xml/">XML <br></a>
</div>
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 {
padding:0.3em;
display:block;
}
<div class="menu">
<h4>Experts</h4>
<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>
</div>
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.
| ||||||||||||||||||||
By Andy King, and thanks to Kwon Ekstrom, Shirley Kaiser, Rogelio Vizcaino Lizaola, Eric Meyer, and Dan Ragle.
Revised: April 3, 2002