I have been using the Mozilla browser and Mozilla Phoenix/FireBird/FireFox browsers for a while now (as far back as when Mozilla Phoenix 0.4), and have happily cast off Internet Explorer. Or so I thought. If you use Mozilla FireFox, take a moment to view my latest MSDN article as linked to by the ASP.NET Dev Center. Scroll down to a code section. You'll see that there's no whitespace in the code, just a blurb of text, like:
private void Page_Load(object sender, System.EventArgs e) { if (!Page.IsPostBack) BindData(); } private void BindData() { OleDbConnection myConnection = new OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + Server.MapPath("Northwind.mdb")); const string productSQL = "SELECT ProductName, UnitPrice FROM Products WHERE CategoryID = 1"; OleDbCommand myCommand = new OleDbCommand(productSQL, myConnection); myConnection.Open(); dgProducts.DataSource = myCommand.ExecuteReader(); dgProducts.DataBind(); myConnection.Close(); }
Which, while syntactically correct, is far from readable. If, however, you visit the same page with IE, the spacing is present. What gives? What was especially odd was that if I visited the same page through the MSDN library link FireFox displayed the spacing and line breaks in the code sections. (This anamoly is a fairly recent one; I'm certain I've used FireFox dozens of times before to read MSDN articles from the Dev Centers without such problems...)
A bit of digging revealed that the Dev Center articles link to an external CSS file that has the following rule:
PRE
{
background:#EEEEEE;
margin-top:1em; margin-bottom:1em; margin-left:0px;
padding:5pt;
white-space:normal;
word-wrap:break-word;
}
The culprit is the italicized white-space attribute. And I blame IE. Why? Well, the W3C defines the whitespace attribute to have three legal values: normal, pre, and nowrap. For normal, the W3C has this to say (emphasis mine):
This value directs user agents to collapse sequences of whitespace, and break lines as necessary to fill line boxes.
So this is what Mozilla FireFox is doing! It's collapsing sequences of whitespace - tabs, spaces, and carriage returns. But why isn't IE 6 doing this? IE 6 does support the whitespace attribute, but has its own, bastardized version of it. The normal value for IE 6 does the following:
Lines of text break automatically. Content wraps to the next line if it exceeds the width of the object.
Whoops! They forgot the collapse sequences of whitespace part! So this is why IE 6 displays the code sections properly, while Mozilla does not - because Mozilla adheres to the standards and IE does not. Meh. Now, why does the Dev Center use this CSS? I'd wager it's so that very long code blocks to not cause the screen to scroll horizontally (note the word-wrap CSS attribute in the PRE tag definition), and that the designers did not test the layout thoroughly with non-Microsoft browsers.
For those who are wondering why the code sections appear fine in the MSDN library version of the article, it's because a different external CSS file is used, which defines the PRE tag like so:
PRE
{
background:#EEEEEE;
margin-top:1em; margin-bottom:1em; margin-left:0px;
padding:5pt;
}
Namely, it omits the whitespace attribute.
I've emailed my MSDN editors about this snafu, and hopefully they can alert the appropriate MSDN folks so I don't have to switch to IE just to read MSDN articles... :-)