It’s Always Something Else
Published 20 years, 9 months past
According to a correspondent, the Redesign Watch and Platelets columns don’t actually sit side by side in Linux, but instead the Platelets drop down to start after the end of Redesign Watch. This is, apparently, consistent across his various Linux browsers, including IE/Win (using crossover). I’m not sure I can explain this. The widths of the two divs that contain those modules are set to 9.5em and 5.5em, respectively, and they have neither margins nor padding (nor side borders). Add them together, and you get 15em, the exact width value of div#extra. I was going to claim a rounding error, except it’s happening in all his browsers, so now I’m thinking maybe a font thing. I might suspect that the Platelets float is expanding its width to enclose the content, except explicit-width floats shouldn’t change width even if its content won’t fit. IE/Win might do that, but I wouldn’t expect it from Firebird/Mozilla, which apparently also has the problem.
As with any experiment, the design here will probably slowly evolve as I run into such things. As an example, I may adjust the widths of the two modules slightly, perhaps to 9.25em and 5.75em, just to see if it causes more problems or not. I knew that, in setting widths so closely to each other and to their inherent content widths, I was taking a risk. I don’t see the risk as any greater than using a table, though: if I did drop those modules into a two-cell table, then the content might push the table to be wider, thus having it stick out of the sidebar entirely. That would be fairly awful. So, as usual, it’s all about tradeoffs. Here, I traded away “always stay next to each other” to get “always stay within the sidebar.”
As silly as this progression of creeping fixes might seem, it’s nothing compared to what Morbus Iff went through in an attempt to make Panther act the way he wanted it to act, and indeed the way Jaguar acted. I suspect there are similar tales of woe from any major power user of any operating system, or any technology for that matter. The more you know, the easier it is to get yourself trapped by unexpected changes.
For example, there have been some problems with the CSS validator of late; Mr. Zeldman has all the details. As a result, there’s been some confusion here and there about the validity of the Box Model Hack. Let me be clear up front: the hack is valid. It always was, and always will be unless the CSS grammar undergoes some fairly radical changes. This is an entirely different question than whether or not you should use it, or any other hack—that’s much less clear. I’m not saying that the hack is Good or Bad. I’m saying that it is completely valid according to the CSS grammar.
Historical note: the Box Model Hack was derived from test p.twentyb in section 7.1 of the CSS1 Test Suite.
Here’s the heart of the matter, the part that causes most people to assume that the hack isn’t valid:
voice-family: ""}"";
I know, it looks like a burst of line noise, or maybe a regexp (but I repeat myself). It’s still quite valid. It’s an attempt to supply a voice-family value of "}", while quoting that value. This is analagous to:
font-family: "New Century Schoolbook";
Now suppose we had a font family named Joe "Average" Public, with the quotes being a part of the name. We’d likely want to quote the name when making it part of a value. Thus, we’d need to escape the quotation marks that are in the family name itself, like so:
font-family: "Joe "Average" Public";
In order to keep the quotes in the name from breaking the value up, they’ve been escaped using a back-slash. That’s part of the CSS grammar. In that light, then, reconsider the name "}". If it’s to be quoted, then the quotes in the family name have to be escaped. Thus, highlighted part of the following example is the escaped voice family name:
voice-family: ""}"";
Therefore: a valid hack. Again, I’m making no claims that using the hack, or indeed any hack, is a good idea or a bad idea. I just wanted to make clear how this particular hack works, and that it conforms fully to the CSS grammar.
This is at any rate better than the recent FrontPage ad that’s making the rounds of standards-aware folks. I’ll just point to Dave Shea‘s post, which contains both a link to the ad in question and a useful hint to understanding why it’s so funny.