CSS causes JavaScript error while moving Web Parts in edit mode

While working on an Internet facing Web Content Management SharePoint 2007 solution for one of our customers Erik has stumbled upon an interesting by-design feature in SharePoint 2007. At some point he has noticed that he couldn’t move Web Parts anymore: clicking on any of the title bars would result in a JavaScript error.

When I’ve heard about this behaviour I almost immediately thought about the custom JavaScript code delivered by the interactive designer. Removing all of this from the Master Page has unfortunately proven that the custom JavaScript worked just fine and had nothing to do with the issue.

By debugging the error message I have found out that the error is being caused by a JavaScript function belonging to SharePoint: MSOLayout_GetRealOffset. Running through page’s elements using DOM made me think about the custom Web Controls we have made. I have suspected overriding one of the render methods improperly causing the error. Still after stripping the Master Page from all the custom controls didn’t help.

The last remaining piece of customization left were the various CSS files delivered by the designer. Run of ideas I removed it as well and... voillá – the bug was gone and the Web Parts could have been moved again!

After some research I have discovered that the error has been caused by the position property used with anything else than static. The error occurs while processing parent elements of the selected Web Part. The exception is being caused by uncaught attempt of reading the offset property of a null object. It seems like altering the position property causes the parent object (container) to be set to null.

This behaviour occurs only in Internet Explorer: it’s the only browser that allows dragging & dropping Web Parts. As there are not many client side script debug tools for Internet Explorer available, it’s quite difficult to find out the exact reason of this error at this point.

The best you can do at this moment is to avoid relative of absolute positioned wrappers containing Web Part zones. While fixing the chrome I have replaced the implemented position functionality with float. It works perfectly and you can't see any difference in the positioning of elements on the page. Another option is to set this property only in the View Mode. You have to note that the editing experience will vary (depends on the complexity of your chrome) from the view experience.

If you would like to research this bug further I have the very basic Master Page and an empty Page Layout for you. What you have to do is create a new Publishing Web and set the Master Page to the one I’ve made. Then you need to create a new Publishing Page using my empty Page Layout. The next step is to add a new Web Part (doesn’t matter which one). As soon as you will try to drag it, you will get a JavaScript error. As soon as you remove the inline style of the div wrapper the error will disappear.