So I'm working on some Javascript that needs to draw a shadow panel underneath another panel. What I need to accomplish is to basically copy the dimension of the first panel and then shift it off a little bit. This is pretty easy to do in IE with the following:

if (Context.ShadowOffset != 0)

{

     var Panel2 = document.getElementById(Context.ControlId + '_Shadow');

     Panel2.style.position = 'absolute';

     Panel2.style.top = (Top + Context.ShadowOffset).toString() + 'px';

     Panel2.style.left = (Context.LastMouseLeft + Context.ShadowOffset +2).toString() + 'px';

     Panel2.style.width = Panel.offsetWidth.toString() + 'px';

     Panel2.style.height = Panel.offsetHeight.toString() + 'px';

     Panel2.style.display = '';

}

Works great in IE with the shadow showing up neatly under the main panel. clientWidth properly returns the current dynamic client width of the DIV tag that is the main panel.

In FireFox, clientHeight seems to work properly adjusting for the size of the content in the DIV tag, but the clientWidth stays doggedly fixed to the width set with the style.

Well, as it turns out FireFox does in fact use the explict width setting for the style when determining clientWidth/clientOffset. The solution to get this to work is to clear out the style:

Panel.style.width = '';
Panel.style.height = '';

before retrieving the clientwidth and if necessary resetting it afterwards. By doing this the Panel style width is now non-existant and Mozilla apparently starts calculating the actual client width instead of just lazily using the fixed value. Note that this works only if your content autosizes properly. If you have content that is way out of control and requires fixed widths, this code will not work. In that case it's best to constrain the client content (like a table or another Div) to a certain size to enforce the width of the outer DIV.

Here's an example of this as part of my wwHoverPanel Control sample I'm going to be posting in a couple of days.

http://www.west-wind.com/presentations/wwHoverPanel/sample/HoverList.aspx

and with a live sample in our West Wind Web Store:

http://www.west-wind.com/wwStore/itemlist.aspx

BTW, there's a great link on the MSDN site that provides all of the different dimension calculations:

http://msdn.microsoft.com/library/default.asp?url=/workshop/author/om/measuring.asp

It looks like most of these are now also supported by Mozilla even though their not standards compliant.