boxed text

Wired has (or did have) monthly calendars in which multi-day events were represented by colored boxes drawn around the dates they included. To avoid ambiguity, overlapping boxes were drawn different vertical sizes. The boxes weren't strictly nested, so I thought this might be somewhat challenging in CSS, but it turned out not to be too hard. This goes Wired one better by adding mouseovers to the key to make particular events easier to find.

Konqueror 2.2.2 renders these incorrectly; it can't seem to deal with the concept that a single piece of text can be inside two different spans with different border settings, so it seems to always prefer the small black boxes over the bigger orangish ones.

The static visual effects should still work with no JavaScript, but the mouseover key won't.

This text has boxes in it. They are not particularly bad-looking. They do have an ugliness problem when they extend around the end of a line, though --- they get no borders where they wrap. This also demonstrates that, in Mozilla, the borders of the boxes don't really affect layout.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

Key:

These are events you'd never want to go to.

These are events you'd like to go to if they didn't cost $2500.


Last modified: Sun Mar 10 16:58:00 PST 2002