Purveyor of Iniquities

Good tutorial on CSS selectors.

When I finally grokked the idea, about a year ago (until then, I had been making everything a class), my CSS became a lot tighter, browser compatible, and easier to write–almost instantly.

It’s still a bit hard to get everything to look right in every (recent) browser, but properly modularized CSS maps to browser errors pretty well and can really help when you’re debugging or hacking in fixes.

Of course, the CSS for this site is a bit of a mess because pixel-positioning with respect to HTML-defined entities (i.e., tables) is ridiculously inconsistant between browsers and I didn’t want to use any CSS hiding tricks. The real solution here would be to replace the tables with divs, but I don’t know that even that would solve the problem of correctly positioning the mouse-over box (try running your mouse over one of the links to the right) if I made the main content box of variable width because there isn’t a way to do positioning or sizing in percents (with respect to the entire page.

In other words, I want a rule like this to pop up a box in the center of the page:

div.side a:hover span {
display:block;
position: absolute;
width: 300px;
height: 300px;
left: center - 150px; /* horizontally centered in window */
top: center - 150px; /* ditto, vertically */
…
}

or, even better, something like this:

div.side a:hover span {
display: block;
position: centered; /* i.e., centered in window */
width: 300px; /* notice height is undefined */
…
}

So is something like this possible or what?