Fixing Microsoft's Knowledge Base Articles With CSS

At the beginning of this year someone at Microsoft got too creative and broke code snippets which are often published in Knowledge Base articles. For example, if you visit KB 829743, Troubleshooting the “View State is invalid” error with ASP.NET, in any browser but Internet Explorer/Win, you will see that the code snippet on the bottom is squished and you can’t even read it. This annoys me a great deal since Firefox is launched automatically whenever I click a link, and I end up pasting the URL in IE every time.

Code snippets in KB articles are enclosed in the following markup:

<code><pre class="code">. . .</pre></code>

First, <code> is traditionally an inline-level element, while <pre> is traditionally a block-level element. You don’t enclose a block element inside an inline one. You do it the other way around.

A quick refresher:

• The pre element tells visual user agents that the enclosed text is “preformatted”.
• code Designates a fragment of computer code.

I don’t know why they put pre inside code and even assigned a “code” class on top of that.

To make matters even more interesting they collapsed white spaces in all code samples! Don’t you want them to be nicely indented in the first place? Below is an excerpt from their style sheet.

pre
{
 word-wrap: break-word;
 white-space: normal;/* IE */ 
}

If you consult the CSS spec and look up the white-space property you learn:

• Normal: This value directs user agents to collapse sequences of whitespace, and break lines as necessary to fill line boxes. Additional line breaks may be created by occurrences of “\A” in generated content (e.g., for the BR element in HTML).
• Pre: This value prevents user agents from collapsing sequences of whitespace. Lines are only broken at newlines in the source, or at occurrences of “\A” in generated content.

No wonder every browser squishes code snips. It’s even more bizarre that IE ignores the rule and leaves whitespaces intact!

This is easy to fix in Mozilla. Go find your user style sheet and open it in a text processor. If you’re new to the concept of user style sheets, please read Reclaim the web with user style sheets first. Add the following CSS rule to it:

.kb pre[class="code"] 
{
  display: block;
  white-space: pre !important;
}

Restart Mozilla and go check out that KB article again. Code snips should look fine. I don’t know how to fix this problem in other browsers. Had they supported user stylesheets, it would’ve been a no-brainer.

IE 7 Announced

Since today is the day when IE 7 has been announced I feel compelled to add my 2 bytes of opinion. This whole “announcement” smells like a marketing gimmick. No more, no less. They could’ve called it IE 6 SP3 for all I care since they will keep tightening security in the bug-replete IE.

As of this very late hour, this mentioned post at the IE Blog has generated 403 comments! (unless their blog stats are skewed) This is the largest thread I’ve seen so far. If you read even a quarter of comments you see the same recurrent questions: XHTML, CSS, PNG, CSS, XML, XHTML, PNG, and so forth.

It’s the same old song and dance:

“Steve Vamos, Microsoft Australia’s managing director,… who admitted he has never used Firefox, said there is a lot of hype surrounding the open-source movement and that if Microsoft’s customers wanted new features, they would have told the company about it.” (via CNET)

There you have it. You can Google around for a dozen of similar quotes in no time.

The commitment about the lack of commitment is pretty clear. Let’s tighten our belts and keep editing user style sheets for now. Feel free to grab mine.

P.S. By the way, Bruce Morgan said Australia execs were clueless. My translation: Vamos is brain-dead. It’s an extreme case of head-up-the-ass disease.