100% Height in Firefox

It's well documented I know but I just ran across this using Deep Zoom Composer and thought I'd mention it. Deep Zoom Composer generates a DeepZoomOutput.html page that works fine in both IE and Firefox. My troubles only started when I messed around with it. Specifically I changed the structure of the page content from that on the left to that on the right:


I also changed the CSS. All was fine in IE and but in Firefox there was no Deep Zoom. Well more specifically, no Silverlight object at all. This relates to the CSS specification and the way the height of a block is calculated relative to its containing block when heights are set to 100%. If you "break the chain" so-to-speak, and fail to give all the <divs> in the chain "height: 100%" then your Silverlight <div> ends up getting zero height. Hence why the original Deep Zoom Composer page works (both <body> and <div> have height: 100%) but my page doesn't. If I set both "outer" and "maincontent" height: 100% then it works in both IE and Firefox.

Technorati Tags: deep zoom composer,silverlight,firefox,ie,css