Thursday, August 12, 2004

Firefox + MSDN = Garbled Code

If you've looked at MSDN through Firefox (or any Mozilla browser) you may have noticed that the code samples aren't displaying properly (they're all run together).

I pulled out the DOM Inspector - great tool, love it - and found it is a problem caused by one of their stylesheets setting the CSS "white-space" property to "normal" which tells the browser to collapse all white-space characters into one space. Obviously this ruins the formatting of the code blocks.

If you don't believe me head on over to a sample MSDN article - such as the String.GetEnumerator() method. See what I mean?

To fix this problem we can apply a user stylesheet to override their CSS white-space setting. Here is the fix...

  1. Locate your profile directory. This should be at the following location on Windows with Firefox 0.9.x: "%home%\Application Data\Mozilla\Firefox\Profiles\[profile name].[something]"
  2. Open the "Chrome" sub-directory of your profile
  3. Create or open the file "userContent.css"
  4. Cut and paste the following CSS rule:
    /*
    * Microsoft seem to have stuffed the MSDN stylesheets by adding "white-space: normal;"
    * to "pre" elements.  Undo that here.
    */
    pre
    {
     white-space: pre !important;
    }
  5. Restart Firefox and browse to your favourite MSDN code snippet!
There you are! Easy when you know how. :)

2 comments:

Anonymous said...

Awesome. Works like a charm. Thanks!

Anonymous said...

You light up my life and rock my world! No more pasting MSDN urls into Explorer to read the code samples! Yeah!!!