Site compatibility: When your standards support is too good...

January 14, 2008 · by Haavard

There's an interesting thread in the Open the Web & Take Action forum which talks about excessive whitespace over at Microsoft's TechNet forums. This works fine in Firefox and obviously IE, but you can see that Opera's display of the page leaves something to be desired.

In the thread, the ever knowledgeable Andrew Gregory had a look at the page, and he found that it was caused by the following CSS code at the bottom of the style sheet used by the page:

div 
{
     word-wrap: break-word; 
     white-space: pre-wrap; /* css-3 */
}

If you remove "white-space: pre-wrap;" from the style sheet and use "Tools > Advanced > Reload from cache", the page looks fine.

Does that mean that we should remove support for "white-space: pre-wrap"? Probably not. But it does show that there is often no clear solution on our end when there is a problem with a site. In this case, I think the best solution would be to contact the webmaster. Someone might suggest removing support for "white-space: pre-wrap", but that would likely break other sites. There is no ideal solution to this. There is no simple bug to fix in order to get it working.

So there you have it. Compatibility issues due to supporting too much of a standard? Yes, that apparently happens too. It's a Weird, Wacky Web.

Readers' comments 5

Left under the original article, as archived.

SmirMonday, January 14, 2008 7:02:04 PM
Hope for IE8 and FF to support "white-space: pre-wrap", so it breaks there, too. Soon afterwards, the site will be fixed

Well I wouldn't remove support for a standards feature, if it breaks a page. Because if everyone would remove that feature or wouldn't implement it, because it breaks a page, this feature would never be available...
Andrew GregoryTuesday, January 15, 2008 11:32:07 AM
Sadly, I think this reflects what I feel is the all-too-common state where web site designers have no understanding of the tools of their trade - HTML, CSS and JS. It's all trial-and-error. Seeing if random feature X, Y or Z does what they want instead of knowing that it's feature W.

To underline what I mean, have a look at that code fragment again, the bit where it says "css-3". pre-wrap is actually part of CSS 2.1!

BTW, should the link on my name go somewhere?
HaavardTuesday, January 15, 2008 1:56:33 PM
Oops! Seems that I forgot a simple quotation mark. Thanks
Unregistered userThursday, February 21, 2008 7:39:12 PM
Anonymous writes: why not just set it to that then as as default setting?
HaavardFriday, February 22, 2008 12:09:38 PM
Set what to what?