• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 980
  • 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
Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

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