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.
The air turned blue.
My solution – I redesigned my styles so I wasn’t setting the background colour….