Index
April 18 2008

In the examples below, a normal div has overflow: scroll; set, and contains enough content to cause the scroll-bars to be shown. A second div is placed over the first, using position: absolute;. In the first example, the floating div has no background set, so the first div is visible through it. In the second example, the floating div has a solid background, obscuring the first div.

Example 1 (no background).
Example 2 (solid background).

The results below show that the major browsers all behave differently when clicking on the part of the floating div that obscures the scroll bars.

What is the correct behaviour here? From an end user's perspective, you might say that the scroll bar should be clickable whenever it is visible (i.e. in Example 1 but not Example 2). In this case Internet Explorer is doing what you would "expect". Alternatively, from a web developer's view you might say that the floating div is "above" the other div, so the scroll bars underneath should never be triggered, regardless of the background of the floating div. In this case, Firefox/Win and Safari seem to be doing the right thing.

Contact me here.