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. :)