HTMLHelp Forums > Help! Stop DIV tag moving when scrolling

Full Version: Help! Stop DIV tag moving when scrolling

HTMLHelp Forums > Web Authoring > Cascading Style Sheets

rjh

Jan 26 2008, 01:53 PM

Hi,

I'm currently developing a website and am having issues with div tags.

When the contents of a page are greater than the screen resolution and the user has to scroll down the page, the container div tag moves down with it.

I need the container div to stay at the top of the page where i have coded iteven when scrolling.

This issue only occurs in Internet Explorer and not in Firefox, Opera, Safari of any other browsers i have tested.

The container div has "relative" positioning and i have 2+ divs inside that, with "absolute" positioning so they stay enclosed in the container.

Below is an example of the html code and CSS, any help i can get in resolving this issue would be greatly appreciated.

CODE

/* General CSS */

html      {height: 100%;}
body      {margin: 0px; padding: 0px; height: 100%; background-color:#F5F5F5; font-family: Tahoma; font-size:11px; color:#000000;}
form      {margin: 0px; padding:0px;}
hr        {border: 0; width: 60%; color: #E4C7AC; background-color: #E4C7AC; height: 2px;}

/* HTML Code */

<div style="position:relative; z-index: 0;">
        <div style="position:absolute; top:0px; left:0px; z-index: -1;"><img src="images/star2.png" border="0" width="100" height="90" alt="" /></div>
        <div style="position:absolute; bottom:-5px; right:-5px; z-index: -1;"><img src="images/contactpage.png" border="0" width="200" height="200" alt="" /></div>

        ADDITIONAL CONTENT
</div>

rjh

Jan 26 2008, 04:21 PM

I have fixed this issue after almost a week of trying,

Someone told me to add "overflow-y: auto;" for the body style in the CSS to fix any scrolling issues. I removed this and it works in IE now.

There are no scrolling issues anyway, can comeone explain why you would add this?

Thanks.

Christian J

Jan 27 2008, 01:48 PM

QUOTE(rjh @ Jan 26 2008, 10:21 PM)

can comeone explain why you would add this?

In IE you always get a vertical scrollbar outlined, even when scrolling isn't necessary. Adding "overflow: auto" makes that go away so it behaves more like other browsers ("overflow-y: auto" should do the same thing). But you should also use an HTML selector to make sure it works with a std mode Doctype:

CODE

html, body {overflow: auto;}

Frederiek

Jan 27 2008, 03:37 PM

FYI, "overflow-y: auto" actually adds the vertical scrollbar space in Safari 3/Mac.
See this sample page I found today: http://www.dave-woods.co.uk/wp-content/upl...-text-wrap.html.

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.