The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Help! Stop DIV tag moving when scrolling
rjh
post Jan 26 2008, 01:53 PM
Post #1





Group: Members
Posts: 4
Joined: 24-January 08
Member No.: 4,780



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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
rjh
post Jan 26 2008, 04:21 PM
Post #2





Group: Members
Posts: 4
Joined: 24-January 08
Member No.: 4,780



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jan 27 2008, 01:48 PM
Post #3


.
********

Group: WDG Moderators
Posts: 6,052
Joined: 10-August 06
Member No.: 7



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;}




--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post Jan 27 2008, 03:37 PM
Post #4


Programming Fanatic
********

Group: Members
Posts: 4,371
Joined: 23-August 06
From: Europe
Member No.: 9



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.


--------------------
"The earth does not belong to us. We belong to the earth."
from Vue du ciel (in French)

"Leave scepticism to others and take action"
from HOME by Goodplanet

An inconvenient truth by Al Gore
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 21st September 2014 - 01:07 PM