Forum Moderators: open

Message Too Old, No Replies

Website DIV Scrolling Issue

Website DIV Scrolling

         

rjharrington

8:41 pm on Jan 24, 2008 (gmt 0)

10+ Year Member



Hi,

I'm having 2 issues with a site im creating,

The first is that if the browser window is smaller than the page contents and you try to scroll down, all the content of the div container scrolls with you. This is the same for all versions on IE, other browsers seem to be fine though. I would like it so the div container stays in the same position even when you scroll.

The 2nd issue is that in IE6 and earlier, the image divs are pushed both down and to the right by 4 pixels. This is the actual width of the cellpadding i set on the table that div container is in. This is not the case in IE7 and other browsers.

Any help i can get on resolving these 2 issues would be greatly appreciated.

[edited by: tedster at 11:20 pm (utc) on Jan. 24, 2008]

rjharrington

2:06 am on Jan 25, 2008 (gmt 0)

10+ Year Member



Anyone?

Basically the divs are moving with the page, when you scroll in IE. Is there anyway to ensure this doesnt happen?

The 3 images need to stay at the corners of the wrapper div.

Thanks.

<div style="position:relative; z-index: 0;" /* wrapper */ >

<div style="position:absolute; top:0px; left:0px; z-index: -1;"><img src="images/star2.png" border="0" width="100" height="90" align="" /></div>

<div style="position:absolute; bottom:0px; left:0px; z-index: -1;"><img src="images/star1.png" border="0" width="50" height="45" align="" /></div>

<div style="position:absolute; bottom:-5px; right:-5px; z-index: -1;"><img src="images/aboutpage.png" border="0" width="120" height="300" align="" /></div>

</div>

BlobFisk

10:24 am on Jan 29, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



There is a position:fixed CSS rule, but it doesn't work in IE. Absolute positioning won't work for you as the top, left, right and bottom are calculated when the page renders first. Once you scroll the browser will not recalculate it unless you write some javascript to do so.