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 TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Do you have to set an explicite pixel value for a scrolling DIV?

Status
Not open for further replies.
j0em0mma

j0em0mma

Programmer
Jul 31, 2003
131
US
Why does the FilterScrollBox not clip the content at the edges of the screen? Do you HAVE to set the width of the FilterScrollBox to an explicite pixel value instead of a percentage? If so, then you can't make a scaleable website using scrolling DIVS, and doesn't that then kind of defeat the purpose of scrolling in the first place since the Browser window will handle that...?

Here is the whole HTML document:


Code: 
<html>
 <head>
  <title>Tester</title>
  <style Type=&quot;text/css&quot;>
   #FilterContainer {
     margin:1px;
     border:1px solid #000000;
     width:100%;
     height:100%;
     text-align:left;
     padding:1px;
     overflow:hidden;
   }
   #FilterScrollBox {
     border:1px solid #000000;
     white-space:nowrap;
     width:100%;
     height:100%;
     overflow:scroll;
     clip:auto;
   }

  </style>
 </head>
 <body>
  <table width=&quot;100%&quot; border=&quot;1&quot;>
   <tr>
    <td>
     <div id=&quot;FilterContainer&quot;>
      <span id=&quot;FilterScrollBox&quot;>
       <span style=&quot;border:1px solid #000000;background-color:#88AACC;width:250px;&quot;>Span1</span>
       <span style=&quot;border:1px solid #000000;background-color:#88AACC;width:250px;&quot;>Span1</span>
       <span style=&quot;border:1px solid #000000;background-color:#88AACC;width:250px;&quot;>Span1</span>
       <span style=&quot;border:1px solid #000000;background-color:#88AACC;width:250px;&quot;>Span1</span>
       <span style=&quot;border:1px solid #000000;background-color:#88AACC;width:250px;&quot;>Span1</span>
       <span style=&quot;border:1px solid #000000;background-color:#88AACC;width:250px;&quot;>Span1</span>



      </span>
     </div>
    </td>
   </tr>
  </table>
 </body>
</html>
[/cod
 
Sort by date Sort by votes
If you remove the outer table, your code will give you a nice scrolling window:

Code: 
<html>
<head>
<style Type=&quot;text/css&quot;>
#FilterContainer
{
	margin:1px;
	border:1px solid #000000;
	width:100%;
	height:100%;
	text-align:left;
	padding:1px;
	overflow:hidden;
}
#FilterScrollBox
{
	border:1px solid #000000;
	white-space:nowrap;
	width:100%;
	height:100%;
	overflow:scroll;
	clip:auto;
}
</style>
</head>

<body>
	<div id=&quot;FilterContainer&quot;>
		<span id=&quot;FilterScrollBox&quot;>
			<span style=&quot;border:1px solid #000000;background-color:#88AACC;width:250px;&quot;>Span1</span>
			<span style=&quot;border:1px solid #000000;background-color:#88AACC;width:250px;&quot;>Span1</span>
			<span style=&quot;border:1px solid #000000;background-color:#88AACC;width:250px;&quot;>Span1</span>
			<span style=&quot;border:1px solid #000000;background-color:#88AACC;width:250px;&quot;>Span1</span>
			<span style=&quot;border:1px solid #000000;background-color:#88AACC;width:250px;&quot;>Span1</span>
			<span style=&quot;border:1px solid #000000;background-color:#88AACC;width:250px;&quot;>Span1</span>
		</span>
	</div>
</body>
</html>

You can set the height of the outer box by editing line 9 (height: 100%).

Hope this helps!

Dan
 
Upvote 0 Downvote
Awesome! Except... Now I need to convert the page/site to not use tables... Is this a byproduct of IE's partial implementation of CSS2? Or is this standard behavior for scrolling divs insode tables accross browser types and platforms?

Thank you very much, works great!
 
Upvote 0 Downvote
I think the reason it didn't work within the table, was because the table was adjusting its width to fit all the span tags in at a width of 250 pixels (approx 1500 pixels).

I don't know of any known table/css bugs however.

Dan
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Alt255
  • Locked
  • Question
Searching for a string that contains brackets
Replies
0
Views
465
Alt255
Alt255
scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
1K
3esolar
3
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
496
lmcate
lmcate
bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
987
bdwilcox
bdwilcox
198709km
  • Locked
  • Question
Grouping XML key value using XSLT
Replies
0
Views
973
198709km
198709km

Part and Inventory Search

Sponsor

Back
Top