When it comes to semantic and well-formed markup, SharePoint 2010 lags a little bit behind. Unclosed HTML tags, inline styles and script, unique classes and not-so-unique IDs with random naming conventions are your usual opponents in the battleground where the older generation Internet Explorers still roam.

The prime example of this is the Navigation Settings page (/_layouts/AreaNavigationSettings.aspx) in the layouts folder. The rendering of this page is likely to fail if you’re using relative positioning or your layout exceeds the complexity of an unicellular organism. As we know, the Ribbon positioning system disables the scrolling ability of the body tag and re-creates it for the div with an ID #s4-workspace. To accomplish this, it uses Javascript to calculate the heights required for the scrolling to occure.

The DOM is a terrible thing to break

The question – What happens if the DOM is broken?

If the DOM is broken due to unclosed or misplaced tags, the script won’t run and the page won’t get its scrollbars. The user won’t be able to scroll and you don’t get the cigar. Because we all like scrolling, this needs to be fixed. I’m sure Microsoft will fix this eventually as this particular page has been broken since MOSS 2007 but in the meantime, a quick workaround is all we need. We are not going the edit the page itself as that is something Microsoft will have to sort out themselves. Instead we’ll use my favourite Javascript library, jQuery to take care of the situation.

If you do a view-source on the page, a form aspnetForm with an action=”AreaNavigationSettings.aspx” is present just after the body tag. This is how we determine our scope for the jQuery magic where we’ll disable the Ribbon positioning mechanism for this particular page that gives us hemorrhoids.

Popularity: 5% [?]