Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Position:Relative causes scrollbars in small window

Status
Not open for further replies.
BrotherArnold

BrotherArnold

Technical User
Jul 12, 2002
16
GB
Hi,

Can anyone explain why I get a right scrollbar when I reduce the height of the window but the page content is still completely in view and if I change relative to absolute I don't get any scrollbars doing the same thing?

The code below is an example of this behaviour. If you resize the window moving the bottom up towards the bottom of the table you'll see the scrollbar appear 50px before the bottom of the table.

How do I stop the scrollbars from appearing? I don't really want to use scroll=no in the body tag as that stops all scrolling. I tried Overflow-x: hidden on the body tag but that doesn't seem to work either.

Code: 
<html>
<head>
<body>
<center>
<table border=1 height=150 width=260 bgcolor="#FFD648">
	<tr>
		<td>DESIGN</td>
		<td>BUILD</td>
	</tr>
</table>

<div style="position: relative;left: 55px;top: -150px">
   	<table height=100 width=100 bgcolor="#FDE283">
		<tr>
			<td>Process1</td>
		</tr>
	</table>
</div>
</center>
</body>
</html>

Thanks in advance

Brother Arnold

"keep passing the open windows..."
 
Sort by date Sort by votes
Oh sorry - that probably won't make any difference.

It's the relative positioning that does it - your div is still taking up the space in the document that it would have done had you not moved it. That's what relative positioning does.

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
So how do web builders get around this because from a usability point of view I don't want scrollbars appearing and potentially confusing the user.

Cheers

Brother Arnold

"keep passing the open windows..."
 
Upvote 0 Downvote
BrotherArnold said:
So how do web builders get around this
Click to expand...

Arnold,

Not being facetious, but most experienced web builders would know of many methods to lay out their pages, and would probably avoid doing what it is you've done.

If you need help with your general layout, maybe give a bit more information (or is what you've posted the whole page?), and I'm sure someone will be able to shed some light on other methods you can use.

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
Hi Arnold,
One caveat on what is below - its in FF1.5. I have not tried in IE or others.

One of the possible issues you're facing is that you have two tables, that currently are overlapping based on the positioning you've set up. Depending upon what you want to see, you have many possibilities. For example, by moving to absolute positioning, as Dan suggested, you can place the second table where you want it (remember its position is relative to the top left corner). This will remove the problem you are seeing with the scroll bars.

Alternatively, by limiting the size of the <div>, you can keep the position relative, but also loose the scrolling bar issues. Try:
Code: 
<div style="position: relative;left:50px;top: -150px; height:0;">
       <table height=100 width=100 bgcolor="#FDE283">
        <tr>
            <td>Process1</td>
        </tr>
    </table>
</div>
This keeps the <div> from extending below the table.
Finally, if you want to keep the tables from overlapping - remove the top: -150px.

I was a bit surprized on the positioning myself (why the table doesn't position within the <div> - check out but just played around - give these ideas and more a try and see what happens - one learns a lot...

Hope this helps, G2III
 
Upvote 0 Downvote
Thanks everyone for your input. All of it helped. I went away and learnt more about positioning as suggested and have since found a different way to get what I want.

I don't know if there's anything wrong doing it this way but it seems to work...
Code: 
<html>
<head>
<body>
<center>
<table border=1 height=150 width=250 bgcolor="#FFD648">
    <tr>
        <td width=100>DESIGN</td>
        <td>BUILD
        	<a href=# style="position: relative;left: -55px;top: -30px">
       			<table height=100 width=100 bgcolor="#FDE283">
        			<tr>
            			<td>Process1</td>
        			</tr>
    			</table>
			</a>
		</td>
    </tr>
</table>

</center>
</body>
</html>

Brother Arnold

"keep passing the open windows..."
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
579
spamjim
spamjim
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
1K
Chris Miller
Chris Miller
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
890
Mike Lewis
Mike Lewis
PeDa
  • Locked
  • Question
Media query: display = none/inline/block 1
Replies
1
Views
543
PeDa
PeDa
Alt255
  • Locked
  • Question
Navigate to bookmark in local file
Replies
2
Views
478
Alt255
Alt255

Part and Inventory Search

Sponsor

Back
Top