Corrupt Breadcrumbs in the in PageAreaTitleFrame

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….

Advertisements
Corrupt Breadcrumbs in the in PageAreaTitleFrame

2 thoughts on “Corrupt Breadcrumbs in the in PageAreaTitleFrame

  1. Donna says:

    I am a newbie with sharepoint, but we are having this issue. We created a new theme that seems to work fine except for this same mouse over issue. I checked the default.master and the td is in there for “onetidpagetitleareaframe”. As far as I know, we have not done and javascript for the pages other than anything that comes standard as we are trying to stay wiht OOTB sharepoint 2007 at this time. I am not sure what I need to do to fix this issue. Any chance you can give a newbie a helping hand? Many thanks- Donna

    Like

  2. Hi Donna,

    The Javascript in question is part of the OOTB page – you can see it in the bottom of the page.

    I *think* I solved this by not setting the background colour for one of the styles – but I’m not sure if it was the ms-areaseparator or ms-pagetitleareaframe.

    Anyway, try not to use the ‘Background-color’ settings for either of those and you should be okay. It might mean some imaginative CSS to work around that restriction, though.

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s