February 21, 2004
I was very inspired by Eric Meyer's Pure CSS Popups and decided I'd try to improve on his technique, resulting in popup01 and popup02 on the CSS Alacrity page. His example lets the link and the link description run into each other, making it hard to see what the link is and what the link description is on UAs without CSS support. My immediate reaction was to use definition lists with the links in <dt>s and the link descriptions in <dd>s, like this:
<dl>
<dt><a href="#">Home</a></dt>
<dd>This will take you to the heart of my den.</dd>
[...]
<dt><a href="#">Jason</a></dt>
<dd>Jason's little corner. He has some interesting stuff going.</dd>
</dl>
But this soon presented problems of its own. I thought I could use the adjacent selector to select the <dd>s when the <dt>s are hovered (I really wanted to avoid this since IE doesn't understand :hover for anything else than <a>):
dt:hover + dd {
[...]
}
For some reason or another, this does not work in Opera or Mozilla. Doing it the other way around (dt + dd:hover) works, but of course serves no purpose for what I want to do. So I looked for other alternatives. The first one, popup01, is almost identical to Meyer's example. The only difference is that all the links are in separate list items, and the link descriptions are separated by a hyphen, making it easier to see where they begin. Still, everything has to be within a link, with the descriptions in pointless <span> tags. I can do better.
The second one, popup02, is visually identical to the first one but structurally different; the descriptions are now in the title attribute of the links and extracted using CSS generated content, then positioned appropriately. This means that UAs not capable of handling generated content will still get the description, assuming they have a way to retrieve the title. Most do, in the form of hovering the mouse over the element.
Of course, both are displayed correctly and exactly the same in Opera, like they should. I mean, of course! Opera is king. Mozilla has an interesting, but wrong, rendering of popup02; it doesn't recognize that the generated content is being taken out of the document flow and thus displays it inside the list item.
This CSS business is fun.