I was tempted to call this “The incredible case of the bust rendering of SharePoint pages”, but it seemed a bit long, to be honest. This is a bit of a detective story (and if I’d the developer who built this in the first place, there’d be a murder) so stick with me…

I’d been working on my nice little brand, and on the item creation pages it’s supposed to look something like this:

Nothing strange or startling, just some new colours. However, my customer found that if he moved his mouse over the links in the breadcrumb, he saw weirdness:

For some reason, on mouse over he was seeing bits of the page redrawn as background. WTF? Clearly, something about my styles was breaking the rendering in IE7. I know I don’t have any background graphics like what I was seeing – it has to be bits of the page redrawn.

I opened up the IE Dev toolbar, and took a look. None of the styles in use were incorrect – their code was fine. I started to take the scientific approach of, um, removing the styles that were in use one-by-one from the branding to see when it started working. It didn’t. Uh, oh. Out of panic, I just started removing all of the styles related to the PageAreaTitleFrame and it’s contents. When I removed .ms-pagetitleareaframe table it suddenly started working. But I could see that this wasn’t used – the IE Dev toolbar was showing me this.

WTF? The code for the style itself wasn’t complex, either! How could this break the rendering?

In particular, it appeared to be the line setting the background-color to white. How the hell does setting a background-color of a style that isn’t even being used in the page break the rendering of IE7?

One of my colleagues suggested looking for the ms-pagetitleareaframe in the source. He doesn’t love the IE Dev toolbar as I do, but to humour him, I took a look:

What? There it is! And it’s on the table cell that encompasses the page title area. But looking at the IE Dev toolbar, that cell is styled as ms-areaseparator.

I wondered if the problem was related to the cell’s ID, so I searched Google for onetidpagetitleareaframe – and the first hit I got was ‘Be careful about hard coding Javascript in SharePoint 2007’ (Good post, worth a look). Interesting thought – could Javascript be causing the problem? I tried searching for onetidpagetitleareaframe in my page source, and right at the bottom of the page I found:

<script id="onetidPageTitleAreaFrameScript">
document.getElementById("onetidPageTitleAreaFrame").className="ms-areaseparator";
</script>

The air turned blue.

So, my problem was a result of Javascript and my background colour for a style that was used for a page initially (but was replaced by Javascript as the page load ended) interacting and breaking the IE7 renderer. But not on the page load, but on the mouse moving over it. Now if that isn’t a knotty and specific set of circumstances, I don’t know what is!

My solution – I redesigned my styles so I wasn’t setting the background colour….