Thoughts From Eric Archive

This is kind of awkward, but here’s the deal: for an article that’s being written about me, we need to include some pictures of me in action, as it were.  I’m going to take some shots of me spinning records on my show tomorrow morning, but what I’d really like to get is good pictures of me presenting.  For these purposes, the ‘livelier’ the shot, the better.  Also good would be any amusing pictures from a conference hallway, or really in any social situation.  If I happen to look a bit goofy in the picture, so much the better; I really wish I had a picture like this one of Scott, but that’s a bit much to hope for.  We’re aiming for shots that capture my personality, not ones that make me look suave.  (Which would probably require some major Photoshop work anyway.)  Thus we’re trying to stay away from posed shots, in general.

So if you happen to have anything along those lines, please either post a URL in the comments or e-mail me directly.  This is for an online article, so the pictures don’t have to be super-high resolution, especially if you’re going to mail the pictures to me as attachments.  If the picture is used, I can’t guarantee that photo credit will be given, but I’ll push very hard to make sure that it is.

Thanks for anything people can contribute!

• Photo Hunt was published on Tuesday, September 21st, 2004.
• It was assigned to the Personal category.
• There have been fourteen replies.

Having talked about how to completely rip away all brower default styles in Firefox, let’s consider the bare minimum of styles we’d need to make the Web at least moderately readable.  As it turns out, the primary factor in document mangling caused by taking out the browser’s default styles is the loss of any display information.  In the absence of information regarding what kind of box an element should generate, they’re all made to generate inline boxes.  This is roughly equivalent to saying:

* {display: inline !important;}

Speaking of which, feel free to try that some time on a test document, or as an entry in a browser’s user style sheet.  The result should remind you of the no-defaults trick.

So let’s say we back up the browser’s default style sheets (you don’t want to lose them completely, unless you plan to re-install the browser) and then erase everything in html.css.  Having done that, we can restore a great deal of sanity to the Web by placing the following rules into html.css.

@namespace url(http://www.w3.org/1999/xhtml);
  /* set default namespace to HTML */

html, body, p, div, h1, h2, h3, h4, h5, h6,
ul, ol, dl, dt, dd, blockquote, address, pre,
listing, plaintext, xmp, menu, dir, isindex, hr, map,
multicol, center, frameset, marquee {display: block;}

li {display: list-item;}

area, base, basefont, head, meta, script, style, title,
noembed, noscript, param, noframes {display: none;}

table {display: table;}
caption {display: table-caption;}
tr {display: table-row;}
col {display: table-column;}
colgroup {display: table-column-group;}
tbody {display: table-row-group;}
thead {display: table-header-group;}
tfoot {display: table-footer-group;}
td {display: table-cell;}
th {display: table-cell;}

That rule set will not only cause block-level elements to start generating block boxes again, but it also lets list items be list items, hides the elements we’d like to have vanish, and restores table behavior to table markup.  With those few rules in place, browsing around will be much easier.  It might not be pretty, but it will avoid the extreme wreckage of removing all default styles.

There will still be some notable differences.  For example, paragraphs may now generate a block box, but they aren’t being given margins, so on most sites paragraphs will suddenly not have a “blank line” of separation.  Similarly, heading margins are gone.  Lists don’t have any predefined indentation.  Table cells don’t have default padding, and the “gutter” around page contents has vanished.  Of course, you might see some or all of those things on a site.  If you do, it means that information has been provided by the site’s styles.

In a quick browse of the Web, I found that CNN‘s site was still kind of scrambled by these styles, though certainly not as badly as before.  As an example, a lot of the article sidebars and pictures weren’t floated, which means the float behavior is markup-driven, not CSS-driven.  Why does it matter?  Because in Firefox, align="right" is just a markup hook on which the default style float: right; gets hung.  If that declaration doesn’t appear in the default styles, the markup will have no visible effect.  In other words, no floating.

The home page of The Mozilla Foundation, on the other hand, hung together pretty well, which indicates all of their layout is driven by CSS instead of presentational markup.  This didn’t come as much of a surprise, but it was nice to see.  I was pleased to find that meyerweb’s home page also stayed in decent shape.

So should you add these rules to your style sheets?  Not unless you’re feeling extra-super-mega-paranoid.  The percentage of visitors displaying your site with the default style sheets removed can be safely estimated to very closely approach zero, maybe even touching it.  Besides which, if someone does drop by with all default styles removed, they’ve probably done it on purpose.  If they then send you snarky e-mail about they broke your site that way, feel free to answer them with a polite acknowledgment that they did, indeed, successfully cut their own throat.  It’s not like that’s your problem, any more than you should be bothered that someone “broke” your site with an anarchic user style sheet that suppresses display of lists and paragraphs, or sets all non-replaced elements to use white text on a white background, or whatever.

A more interesting question is whether you should set up a browser to use just those rules as defaults.  I’m giving serious thought to maintaining two copies of Firefox: a normal install, and a development install that’s been hacked to use just the styles I listed before.  It could prove valuable in checking the design assumptions of a work-in-progress, and thus to identify possible weak points in the author styles.  As an example, if I loaded a new design into the development browser and found that lists were completely non-indented, then I’d know I was leaving the list indentation distance up to browser defaults.  At that point, I could decide whether or not that was a good idea.  In some designs, it might be fine, but in others it could be a problem.  Either way, I’d have the chance to consider that question directly, and reach a decision, instead of sailing blindly on, never having thought about it either way.

• Fractionally Restoring html.css was published on Monday, September 20th, 2004.
• It was assigned to the CSS category.
• There have been ten replies.

Every now and again, I feel good about our city’s main paper, The Plain Dealer.  Today was one of those days; they published a Spinsanity-like piece that dissected the distortions coming from both U.S. presidential candidates.  I was going to lnkblog it, but it turned out they’d split the piece in two on the Web, so I’ll link to them here.

• Whom Do You Believe?  Bush?
• Whom Do You Believe?  Kerry?

I’d have linked to the printer-friendly versions, except they contained a window.print call, and I wasn’t sure if they’d force a print in some browsers or not.  At the least, they’d call up a print dialog, which is kind of annoying.

The views I expressed in Partied Out are just deepened by this sort of thing.  I know, it’s nothing new.  That doesn’t make it any less depressing.

• Do I Have To Pick One? was published on Saturday, September 18th, 2004.
• It was assigned to the Politics category.
• There have been no replies.

Just in case anyone cares, I’ve finally brought the Media Is Funny and CNN Is Funny pages out of dormancy.  They’re now caught up to this morning.  On a related note, I saw something this morning that didn’t really qualify for either page, but was worth sharing nonetheless.  The ad server at The Weather Channel coughed up a filler image today, and lucky me, I caught it.

So if you were ever curious about how much screen real estate that ad was chewing up… now you know.

• A Few Spots of Fun was published on Saturday, September 18th, 2004.
• It was assigned to the Humor category.
• There have been no replies.

I was just recently asked if attribute selectors must use quotes around the value.  In other words, are both the following two selectors legal?

a[href="http://www.meyerweb.com"] {font-weight: bold;}
a[href=http://www.complexspiral.com] {font-style: italic;}

“No, they’re optional,” I said with assurance.  And then the doubts started to gnaw at me.  What if they actually weren’t, which might make sense given that you can require the exact match of a space-separated list of attribute values? By this, I mean that if you declare:

div[class="this is a test"] {color: orange;}

…then the selector will match any div element whose class attribute is exactly this is a test, in that order, and with nothing else in the attribute value.  Or so I’ve always been given to understand.  In that case, if you left off the quotes, couldn’t that somehow be confusing to the browser?  Maybe not, but it still bothered me.

So I went digging through CSS2.1, Appendix G and found the grammatical definition of an attribute selector.

attrib
  : '[' S* IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S*
    [ IDENT | STRING ] S* ]? ']'
  ;

You all understood that, right?  Uh-huh.  Me either.  (This is one of those hostile-to-outsiders posts I mentioned a while back.)

I never liked grammar in school, and I still don’t, but it is sometimes sadly necessary.  So here goes.  When you run down the definitions of the all-caps words (I think those are tokens) you find that IDENT is an identifier, which is sort of a catch-all bin for things like selectors, property names, values, and such.  Fine.  STRING, on the other hand, is a collection of symbols and other fun stuff, again including the non-ASCII range but not the ASCII range.  But then it includes the entirety of Unicode.  I’m not sure how much sense that makes, but whatever.

So the whole point of this is: if quotes around an IDENT are optional, wouldn’t it have made more sense to say this?

attrib
  : '[' S* IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S*
    [ STRING? IDENT STRING? ] S* ]? ']'
  ;

Or even:

attrib
  : '[' S* IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S*
    [ '"'? IDENT '"'? ] S* ]? ']'
  ;

It’s the [ IDENT | STRING ] from the original definition that has me befuddled.  It seems like it’s saying you can include an IDENT or a STRING but not both, and since IDENT doesn’t include quotes, that implies that you can either drop in an identifier, or a string with quotes.  Why is this a good idea?  Does it mean that any identifier has to be unquoted?  Does it mean that there’s no practical distinction between a STRING and an IDENT in this situation?  Does it mean that quotes prevent the inclusion of anything useful?  Somebody let me know.

• Grammar Question was published on Saturday, September 18th, 2004.
• It was assigned to the CSS category.
• There have been sixteen replies.

Since a few people asked for it, I’ve created a test file that reproduces the Internet Explorer freeze reported yesterday.  You can find it with the title “Internet Explorer Freezes — BEWARE!“.  If you follow that link with a non-IE browser, you should see a static copy of the “Ten Things To Do…” post, with two differences:

1. I stripped off the theme stylesheet so the masthead graphic isn’t shown.
2. I inserted a warning/explanatory comment near the top of the document.

Under the hood, the main difference is that the style sheets are all embedded in the document, so if you’re so inclined you can download that single page to your hard drive and fiddle with it to your heart’s content.  If anyone can narrow down this problem to a very minimal test case, I’d love to see it.  Refer back to “When Browsers Attack!” for notes on what I discovered.  There may well be more to the story, but if so, I didn’t find it.

I’ll reiterate the warning, in case it somehow wasn’t clear enough: iif you load this document in IE/Win, the odds are very, very, very high that it will freeze Internet Explorer, necessitating a force-quit of the application.  It may also crash Windows.  If you don’t want those sorts of things to happen to you, then don’t load the document.  Clear?  Good.

• Freezer Case was published on Friday, September 17th, 2004.
• It was assigned to the Browsers and CSS categories.
• There have been twenty-three replies.

Remember my recently posted conversation with Molly?  Boy, am I ever feelin’ that today.  In spades.

Some of you have noticed earlier today that things were presentationally unstable.  Depending on when you dropped by, you would have seen raw document presentation with no author styles at all, or some chunks of the site’s usual styles but not others, or all of the usual styles with a few oddities thrown on top for good measure.  For a few hours, during which I had to attend to something else, the site was fine except that in IE/Win, the main content column was quite a bit wider than usual, and some bits of content were visually exceeding the edges of the design box.  All that was happening because I was turning styles on and off in an attempt to stop freezing Internet Explorer for Windows.

Freezing?  Oh, yes.  As in locking it up so that people had to use the Task Manager to force-quit the process.  There were probably a few reboots out there as well; there were at least a couple here in Casa de Meyer.  Ordinarily, I’d apologize.  Not this time.  If you want an apology, try finding the person or persons responsible for IE’s CSS handling, and demand an apology from them.  I’m not taking the rap for this.

To set the stage, let me back up a couple of days.  As I passed by Kat’s office, she called out, “Hey, how come my browser keeps getting screwed up?”

“Because it’s Explorer,” I said.  “Next question?”

“Ha ha.  Seriously, every time I try to view your ‘ten things to do in Cleveland‘ post, the computer crashes.  I think there’s something wrong with it.”

Grumbling, I wandered over to her computer.  Sure enough, the browser was completely frozen.  She’d already called up the Task Manager and was forcing the browser to quit.  She said it was the third time she’d had to do it.  As I watched, the screen went blank, then drew the desktop color and stopped.  The cursor appeared as an hourglass, and refused to change or even move.

Once the system had gone through a hard reboot, I fired up Netscape 7 and loaded up meyerweb.  I surfed around to various posts.  No problems at all.  I then launched IE and loaded up the home page.  No problem.  I went to the offending post.  Instant freeze.

After a few more invocations of the Fatal Freeze, I wandered out of her office again, muttering about Explorer and Windows and pondering the possibility that her computer had been infected with some kind of virus, malware, or other nastiness.  But then, the next day, I got some e-mail reporting similar problems.  Then Ian Firth managed to get a comment in about the problem on the post “Really Undoing html.css“, even though others were getting the Fatal Freeze on that very post.  And he mentioned that it was happening in both IE and FeedDemon—which meant it was something in IE’s rendering engine, since FeedDemon just wraps itself around the engine.  A similar report cropped up in the FeedDemon forums this morning, where it was mentioned that a similar problem had already been seen in the post “Standards Savings“.  (Not that anybody had actually bothered to tell me, but hey, whatever.)

So I fired up VirtualPC this morning and tested the problem for myself.  And sure enough, I was very quickly the latest resident of Lockup City.  So I started narrowing down the cause.  I’ll spare you all the nasty details (and foul language) of my bug hunt, and cut to the chase: the lockup was happening on entry pages where the post content included an element that used left padding.  Blockquotes and lists were the prime triggers.  There wasn’t an absolute 100% guarantee of trouble, but it was close.  I could avoid the freeze by commenting out a single declaration in my main style sheet:

#main {
  margin: 0 15em 0 0;
  /* padding: 3em 4em 3em 4em; */
  border-right: 1px solid #AAA;
  background: #FFF;
  min-height: 30em;
}

That’s why the content was running rampant earlier today.  I had to leave that line commented out for a few hours.  But I knew that couldn’t be the real cause, because it didn’t cause freezes on the home page, or even on monthly or daily archive pages.  The freeze only happened on an individual entry page where there was a padding-indented element inside the content column.  Thus, the source was most likely to lie in style sheet that’s applied only to post pages.

So I started digging through my entry style sheet until I narrowed the problem down to this line:

.prev-next {margin: 0; padding: 0.25em 1% 0; 
  float: left; width: 98%;}

If I commented it out, and uncommented the padding declaration from before, there were no problems.  So the culprit lay somewhere in the .prev-next rule.  Anyone want to guess at the cause?  Go ahead.

Oh, all right, I’ll tell you.  It was float: left;.  As soon as I removed that declaration, the IE6 freezing problem just melted away.  So if you’ve encountered freezes while trying to view entry pages in the past, you shouldn’t any more.  (If you do, please comment on this entry with the exact browser and OS you’re using.)

The original point of the float statement was to get the unordered list to wrap around the floated list items within it, since floated elements wrap around floated descendants (for more details, see my article “Containing Floats“).  Since that was apparently a recipe for disaster, I modified the rule to read:

.prev-next {margin: 0; padding: 0.25em 1% 0; 
  width: 98%; height: 1em;}

It isn’t exactly the same as what I was doing before, but the result is close enough for now.

What else might I have done?  Well, in all honesty, I thought seriously about leaving things status quo and letting IE users go hang.  I don’t cater to potential crash bugs in NN4, for example; why should I make an exception for another browser?  But as I always knew I would, I grumbled a bit and then made an accommodation for IE.  I may one day restore the float for more modern browsers and use some sort of hack to hide it from IE/Win, but for now I’ll leave things be.

What’s odd to me is that the styles involved in triggering this problem have been in place literally for months.  If this was a problem, it should have arisen before now.  Yet the first I heard of this freeze bug was two days ago, and then all of a sudden I was hearing about it from multiple sources.  If I’d been updating my CSS, that would be understandable, but I wasn’t.  So what happened?  Did the installed Explorer population just get spontaneously and collectively buggier over the weekend, or what?  Is there a subtle worm running around adding bugs to IE’s rendering engine?  I’m really at a loss here.

As to why that particular combination of styles would cause IE to freeze up, I’m completely at a loss.  Not a clue in the world.

While I was mucking around in the CSS anyway, I decided to see if I could fix the rendering error in IE/Win that made the sidebar hang out over the vertical separator.  I did, so far as I can tell.  The problem there was the “Exploration” box and the styles I’d applied to it.  Apparently, if you set a form element to width: 95%; margin-left 5%; and then set a text input within that form to width: 100%;, it all adds up to something like 120%, or something.  So I did a little bit of a hack to hide the input element’s width value from IE/Win.  The input box won’t be as wide for IE/Win users, but as far as I’m concerned that’s an acceptable loss.

I hope your morning was substantially less frustrating than mine.

• When Browsers Attack! was published on Thursday, September 16th, 2004.
• It was assigned to the Browsers and CSS categories.
• There have been fifty-four replies.

Heard several times in 2002 and 2003: “Hey, Eric, how come you don’t use a blogging package for your site instead of that goofy XML/XSLT thing you cooked up?  It would make your archive URLs easier to remember, you could let people search, and comments would be possible.”

Oh, I don’t know… maybe because once I pour everything into a system, I’m subject to its quirks and whims, whereas if I roll my own system, it’s subject to my quirks and whims—and is thus tuned to my personal expectations, built to account for what I might choose to do even if I don’t realize it?

Despite this totally sensible attitude, I eventually did migrate to a system (WordPress).  That decision just bit me, thanks to its handling of markup in a post title.  Had the markup just been stripped out, that would be one thing—annoying, but totally understandable.  But to only sort-of strip it in the post slug and drop the markup raw into the title element, thus breaking any hope of validation?  Instead of, oh, I don’t know, maybe stripping the markup from both the title element and the post slug, but otherwise leaving it alone, so that the post title could remain marked up in the document itself?

<sigh type="frustrated" />

For the record, this is not evidence that WordPress sucks.  All packages suck in some way, and each one sucks in unique ways.  Eventually, you’re going to trip over something undesirable.  Today it was my turn to take that trip.

Now the post slug of emreallyem-undoing-htmlcss is enshrined forever, because you don’t change permalinks if you can possibly avoid it.  I can avoid it here by gritting my teeth, sucking it up, and wishing I had the programming moxie (not to mention spare time) to implement my own full-featured system.

• When Blog Software Attacks! was published on Wednesday, September 15th, 2004.
• It was assigned to the WordPress category.
• There has been one reply.