<LJ-CUT text=" --More--(41%) ">
In the first one, the top margin of the heading box escapes out of its enclosing rectangle. This is visible in two places (look at them side by side.)
- "Heading One" is too close to the top edge of the window (it is overlapping the document's outer bounding box.)
- "Heading Three" overlaps the enclosing table, meaning that the top edge of the box around the heading does not line up with the top edge of the image to its left.
So, CSS gurus, tell me how to edit that file to make it look like css2.gif.
If you think you know how to fix this, please try it out by editing the file instead of just saying "you need to use a DIV inside a SPAN and change the ziggurat mode to inverted", because I think what's going on here is more complicated than it at first appears.
startled's comment has convinced me that, while it might be possible to acomplish this with CSS in a way that will work in the current crop of browsers, any solution will be flaky and fragile, and it's just far, far more trouble than it's worth. So I'm going back to a table-based layout.
All I wanted to do was put a dumb box around my headings. This, apparently, is rocket science with CSS. But with tables, it will work just fine in every browser shipped in the last ten years.