IE Scroll problem with css relative position inside a panel

[pbrosset]

Hi all,

I'm having a problem when trying to style the html elements displayed in one of my panels (inside a region of a borderlayout).

It seems that whenever I set the following css style:

position: relative;
to whatever HTML element inside my panel and when I try to scroll down the panel, the element that was relatively positioned doesn't follow the movement of the page and behaves as if it was positioned using:

position: fixed;

I did a test with the following code:

HTML code:


<p class="pos">Duis pellentesque, odio eu tristique semper, est enim facilisis sem, non molestie orci lacus in tortor. Nulla facilisi. Nulla facilisi. Vivamus sit amet mi. Sed laoreet. Nunc libero erat, elementum ut, lacinia in, sagittis non, est. Quisque pulvinar dolor sed est.</p>


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse feugiat metus sit amet enim. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut est urna, tincidunt a, pretium ac, porttitor non, sem.</p>

CSS code:


p.pos
{
position: relative;
}

And I put this inside a contentPanel.
When I scroll down to reveal more content, the p.pos paragraph just stays exactly where it was as if in position fixed.

Any idea on that ?
Thanks a lot

[jack.slocum]

I take it you are using IE7 and strict mode?

http://rowanw.com/bugs/overflow_relative.htm

The only workaround I have found is to make the parent element position relative or absolute and make sure you put a left and top of 0. It still only works sometimes. Removing the strict doctype the problem goes away.

[pbrosset]

Thanks Jack,
The bug described here:
http://rowanw.com/bugs/overflow_relative.htm
is exactly what I'm facing.

Unfortunately, this is a real limitation for my project and I'll have to review my CSS files to try and avoid relative positioning if possible.
It's sad to see IE7 also fails at these kinds of things (and when you see how it fails the CSS ACID test, it makes you wonder if they did fix anything at all with this new release).
Anyway, I tried both your solutions:

- relatively positioning the parent element didn't work for me as the whole page doesn't scroll at all now, when you click and drag the scroll bar down, nothing moves anymore. I have actually tried to position the DIV corresponding to the contentPanel in which I have the problem. should I be positioning an even higher element in the hierarchy?

- changing the DOCTYPE to transitional did work but doesn't appear to be an alternative in our project since we're trying to build semantically correct markup that can be validated and everything. We can't let the browser render the structure by allowing HTML4 elements.

Thanks anyway for the quick reply. If you have ideas on how I should position the parent DIV in my code so it could fix this scrolling problem under IE, that'd be great.

what I did was something like that:


$(myContentPanel.getId()).style.position = "relative";
$(myContentPanel.getId()).style.top = "0px";
$(myContentPanel.getId()).style.left = "0px";
(Where $ is the document.getElementById method)

What do you think?

Thanks a lot
Patrick

[jack.slocum]

You will need the direct parent. Maybe something like:

var parent = $('your-non-scrolling-element').parentNode;
getEl(parent).applyStyles('position:relative;left:0;top:0;');

[jay@moduscreate.com]

wow prototype + Yui + yui-ext. js spaghetti.

[gtomalesky]

I am using DDProxy to make a regular HTML element dragable. When I drag to element to the extreme right of my browser, the whole page scrolls to the left. If I continue dragging, the entire web page is scrolled off the browser window!!!

Any ideas as to how to fix this?

Greg