1. Home
2. Developer Center
3. Dreamweaver Developer Center
4. CSS Advisor

CSS Advisor

Unscrollable content bug

Problem

If one or more absolutely-positioned elements are placed within a relatively-positioned element with no assigned dimensions, either no scrollbar will appear at all, or it will not extend far enough to view all of the content in the absolutely positioned element(s).

Solution

Specify zoom: 1 for the relatively-positioned container (inside a conditional comment).

Detailed description

This issue was originally reported by Altieres Rohr on positioniseverything.net.

The page content is generally contained inside a box that is relatively-positioned with no assigned width or height. Nested inside this box are one or more absolutely-positioned boxes. The absolutely positioned box's top should be calculated from the top of the relative box, not the top of the document, although the relative box does not truly 'contain' the absolute box- which cannot technically be inside other elements. However, Internet Explorer believes the relative box does contain the absolute box, and tries to make the parent element as big as the absolutely-positioned element 'inside' of it, but forgets in the process any content that goes below the browser window's limits and because of this- will limit the scrollbar accordingly. This results in the user not being able to scroll to the very bottom of the absolutely-positioned box, and content that falls below the browser's viewport can't actually be viewed.

The old (pre-IE7) solution for this bug, and several others, was the Holly Hack. However, the Holly Hack relies on buggy behavior that is no longer present in Internet Explorer 7 -- and using it can cause things to go a bit haywire. Instead, use an Internet Explorer Conditional Comment (IECC) to apply zoom: 1 to the container in all versions of Internet Explorer. This will give the container the "layout" it needs to bring the scrollbars back.

<!--[if IE]>
<style type="text/css"> 
#containerID { zoom: 1;}
</style>
<![endif]-->

Text ID: UNSCROLLABLE_CONTENT

---