• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 950
  • Last Modified:

No scroll bar with releative position

I have a page that I am using releative postioning on.  When I position an item outside the page I do not get a scroll bar.  If I change the position to absolute I get a scroll bar.  Shouldn't I get a scroll bar with relative position?

Get a scroll bar
----------------------------
<!DOCTYPE HTML PUBLIC "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title></title>
</head>
<body style="">

<div style="overflow-x:scroll; overflow-y:scroll; width=100; border=1px solid; position=absolute; left=400;">laksdjfl;kasjdfl;kjasdfl;kjasdl;fkjasdl;k</div>
</body>
</html>

no scroll bar
---------------------------------
<!DOCTYPE HTML PUBLIC "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title></title>
</head>
<body style="">

<div style="overflow-x:scroll; overflow-y:scroll; width=100; border=1px solid; position=relative; left=400;">laksdjfl;kasjdfl;kjasdfl;kjasdl;fkjasdl;k</div>
</body>
</html>
0
rfulcher
Asked:
rfulcher
  • 3
  • 2
1 Solution
 
GrandSchtroumpfCommented:
Your html and CSS is not valid:
use a full doctype
use ":" for the styles instead of "="
use units for the sizes;

Here is the corrected version:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body style="">

<div style="overflow:scroll; width:100px; border:1px solid black; position:relative; left:400px;">laksdjfl;kasjdfl;kjasdfl;kjasdl;fkjasdl;k</div>

<div style="overflow:scroll; width:100px; border:1px solid black; position:absolute; left:400px;">laksdjfl;kasjdfl;kjasdfl;kjasdl;fkjasdl;k</div>

</body>
</html>
0
 
jmelikaCommented:
rfulcher,

I tried both HTML's that you have and I got a scroll bar in both cases.  Of course the second example made the box move a little bit to the right, but that's because it's relative.

Try taking that code out and put it in a brand new HTML file and see the result.  I have a feeling the scroll bar is prevented because of something else and not anything in the code you pasted.

Good luck!
JM
0
 
rfulcherAuthor Commented:
If you copy and paste the code into a page. then make both box's relative. then resize IE so that the right hand side overlaps the two boxs then you will not get a scroll bar.  If you do the same with it as absolute you do.  It only happens in IE.  I have some charts that I am displaying on my web page and they go off to the right hand side of the screen.  Some are totally off to the right.  When they are positioned with relative i don't get a scroll bar in IE.  I gave the code a try in a new page.  If I am doing something stupid (which is not out of the ordinary) please point it out.  GrandSchtroumpf  thanks for the correction to my code : vs =.  Please try it again in IE with a new page and see if you get the same results.  Both boxes have to be relative!!!!!!!
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
GrandSchtroumpfCommented:
Ohhhh, i finally undestand what you mean.  I thought you were talking about internal scrollbars, but you are talking about the window's scrollbars.

> Shouldn't I get a scroll bar with relative position?
Yes there should be one i guess, and firefox displays one.  But, trust me, it's not the first time you'll see some odd behaviour from IE.

Now that you have identified the IE bug, you just need to find a workaround.
can you use margin-left then instead of relative positioning?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body style="">

<div style="overflow:scroll; width:100px; border:1px solid black; margin-left:400px;">
laksdjfl;kasjdfl;kjasdfl;kjasdl;fkjasdl;k
</div>

</body>
</html>
0
 
rfulcherAuthor Commented:
Thanks for validating my thoughts.  For right now I will just use the absolute, dont' have all the time in the world to play with IE (I hate IE).  I will just use absolute.  Thanks for the response
0
 
GrandSchtroumpfCommented:
<:°)
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now