PDA

View Full Version : DIV with overflow:scroll is preventing clickable links in another DIV



Vexen
08 Jun 2011, 10:41 AM
(General info, all HTML and CSS is by hand and doctype is HTML 4 STRICT)

I am trying a technique to get a non-scrolling DIV. I.e., one that stays still while the rest of the page scrolls. In this circumstance it is so that Google AdSense ads stay static on the screen, but it is also an ideal solution for menus.

All page content is in a DIV (PFrame) (it stands for pseudo-frame). This DIV has a vertical scroll bar and scrollbars are removed for the BODY. This means the page isn't really scrolling, just the DIV. The DIV is fullwidth, so, the scrollbars look completely normal and are in the expected place for the user. The static DIV (.AdDiv) is then positioned absolutely, just to the right of the known width of the PFrame's actual content. Because it isn't in the PFrame, it doesn't scroll.


body{overflow:hidden;width:100%;height:100%}
div.PFrame{overflow:scroll;position:absolute;top:0;left:0;width:100%;height:100%;overflow-x:hidden}
div.AdDiv{position:absolute;left:836px;top:30px}

It works well in IE9, Firefox 3.6 and 4, and Safari (I only tested on those 3). What a great non-scripted, normal-looking solution to having a static non-scrolling menu or ads div!

Except for one thing. When the browser window is of a certain size, the DIV's scrollbars move UNDER the AdDiv.

So: I set z-index of PFrame to 2 (infront), and z-index of AdDiv to 1 (therefore, behind), so the scrollbars now appear normal, and go over the AdDiv as expected. But now the static DIV is completely behind the width:100% div. This doesn't matter as it is still completely visible as the content of the main div is not wide enough to obscure it.

In IE and Safari, all works fine with the div being underneath the other.

But in Firefox, none of the links are clickable.

So, does anyone know:

(1) How can I make Firefox - and just that browser - ignore the z-index settings? (This will mean Firefox users sometimes have scrollbars disappear under the AdDiv).

(2) Should I just let the scrollbars disappear sometimes, as it'll only happen sometimes? (This is ok, these are only personal websites I maintain, nothing paid-for or commercial, so, I can do whatever I want with them)

(3) Or any other ideas?