homepage Welcome to WebmasterWorld Guest from 54.242.126.126
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
HTML Scroll Box Problem
Scroll box contents occupy space below the box.
Blitzenspeicher



 
Msg#: 4467294 posted 5:51 pm on Jun 19, 2012 (gmt 0)

Though the scroll box works as it should, the contents also take up vertical space below my intended page, pushing the bottom of the page down below any contents on the page, leaving a big empty space.

Here is the core HTML, CSS for the page. What needs to change?


<!-- Start of scroll table -->

<table cellpadding="0px" cellspacing="0px" border="0px" style="width: 300px;font-family:arial;font-size:14px;scrollbar-track-color:#404040;scrollbar-face-color:#a0907c;background-image:url(yelbak.png);background-repeat:repeat;color:#000000;">
<tr>
<td>
<img src=".jpg" width="0px" height="0px" border="0px" align="center">
</td>
</tr>
<tr>
<td style="padding-left:6px;">
<div style="overflow:auto;height: 660px;width:300px;">

<p><b>Lorem ipsum dolor sit</b> amet, consectetuer adipiscing elit. Phasellus facilisis, risus at tempor volutpat, eros nulla malesuada augue, vitae consectetuer quam quam eu nibh. Suspendisse laoreet dignissim neque. Sed semper. Nullam facilisis. Nam tristique sapien. Sed turpis justo, lobortis sit amet, posuere at, tristique id, nunc. Vestibulum rutrum dui at lectus. Sed enim. Ut eros eros, pulvinar a, vestibulum sit amet, ornare ac, eros. Suspendisse imperdiet.</p>

<p><b>Lorem ipsum dolor sit</b> amet, consectetuer adipiscing elit. Phasellus facilisis, risus at tempor volutpat, eros nulla malesuada augue, vitae consectetuer quam quam eu nibh. Suspendisse laoreet dignissim neque. Sed semper. Nullam facilisis. Nam tristique sapien. Sed turpis justo, lobortis sit amet, posuere at, tristique id, nunc. Vestibulum rutrum dui at lectus. Sed enim. Ut eros eros, pulvinar a, vestibulum sit amet, ornare ac, eros. Suspendisse imperdiet.</p>

<p><b>Lorem ipsum dolor sit</b> amet, consectetuer adipiscing elit. Phasellus facilisis, risus at tempor volutpat, eros nulla malesuada augue, vitae consectetuer quam quam eu nibh. Suspendisse laoreet dignissim neque. Sed semper. Nullam facilisis. Nam tristique sapien. Sed turpis justo, lobortis sit amet, posuere at, tristique id, nunc. Vestibulum rutrum dui at lectus. Sed enim. Ut eros eros, pulvinar a, vestibulum sit amet, ornare ac, eros. Suspendisse imperdiet.</p>

<p><b>Lorem ipsum dolor sit</b> amet, consectetuer adipiscing elit. Phasellus facilisis, risus at tempor volutpat, eros nulla malesuada augue, vitae consectetuer quam quam eu nibh. Suspendisse laoreet dignissim neque. Sed semper. Nullam facilisis. Nam tristique sapien. Sed turpis justo, lobortis sit amet, posuere at, tristique id, nunc. Vestibulum rutrum dui at lectus. Sed enim. Ut eros eros, pulvinar a, vestibulum sit amet, ornare ac, eros. Suspendisse imperdiet.</p>

<p><b>Lorem ipsum dolor sit</b> amet, consectetuer adipiscing elit. Phasellus facilisis, risus at tempor volutpat, eros nulla malesuada augue, vitae consectetuer quam quam eu nibh. Suspendisse laoreet dignissim neque. Sed semper. Nullam facilisis. Nam tristique sapien. Sed turpis justo, lobortis sit amet, posuere at, tristique id, nunc. Vestibulum rutrum dui at lectus. Sed enim. Ut eros eros, pulvinar a, vestibulum sit amet, ornare ac, eros. Suspendisse imperdiet.</p>

<p><b>Lorem ipsum dolor sit</b> amet, consectetuer adipiscing elit. Phasellus facilisis, risus at tempor volutpat, eros nulla malesuada augue, vitae consectetuer quam quam eu nibh. Suspendisse laoreet dignissim neque. Sed semper. Nullam facilisis. Nam tristique sapien. Sed turpis justo, lobortis sit amet, posuere at, tristique id, nunc. Vestibulum rutrum dui at lectus. Sed enim. Ut eros eros, pulvinar a, vestibulum sit amet, ornare ac, eros. Suspendisse imperdiet.</p>

<p><b>Lorem ipsum dolor sit</b> amet, consectetuer adipiscing elit. Phasellus facilisis, risus at tempor volutpat, eros nulla malesuada augue, vitae consectetuer quam quam eu nibh. Suspendisse laoreet dignissim neque. Sed semper. Nullam facilisis. Nam tristique sapien. Sed turpis justo, lobortis sit amet, posuere at, tristique id, nunc. Vestibulum rutrum dui at lectus. Sed enim. Ut eros eros, pulvinar a, vestibulum sit amet, ornare ac, eros. Suspendisse imperdiet.</p>

<p><b>Lorem ipsum dolor sit</b> amet, consectetuer adipiscing elit. Phasellus facilisis, risus at tempor volutpat, eros nulla malesuada augue, vitae consectetuer quam quam eu nibh. Suspendisse laoreet dignissim neque. Sed semper. Nullam facilisis. Nam tristique sapien. Sed turpis justo, lobortis sit amet, posuere at, tristique id, nunc. Vestibulum rutrum dui at lectus. Sed enim. Ut eros eros, pulvinar a, vestibulum sit amet, ornare ac, eros. Suspendisse imperdiet.</p>

<p><b>Lorem ipsum dolor sit</b> amet, consectetuer adipiscing elit. Phasellus facilisis, risus at tempor volutpat, eros nulla malesuada augue, vitae consectetuer quam quam eu nibh. Suspendisse laoreet dignissim neque. Sed semper. Nullam facilisis. Nam tristique sapien. Sed turpis justo, lobortis sit amet, posuere at, tristique id, nunc. Vestibulum rutrum dui at lectus. Sed enim. Ut eros eros, pulvinar a, vestibulum sit amet, ornare ac, eros. Suspendisse imperdiet.</p>

<p><b>Lorem ipsum dolor sit</b> amet, consectetuer adipiscing elit. Phasellus facilisis, risus at tempor volutpat, eros nulla malesuada augue, vitae consectetuer quam quam eu nibh. Suspendisse laoreet dignissim neque. Sed semper. Nullam facilisis. Nam tristique sapien. Sed turpis justo, lobortis sit amet, posuere at, tristique id, nunc. Vestibulum rutrum dui at lectus. Sed enim. Ut eros eros, pulvinar a, vestibulum sit amet, ornare ac, eros. Suspendisse imperdiet.</p>

<p><b>Lorem ipsum dolor sit</b> amet, consectetuer adipiscing elit. Phasellus facilisis, risus at tempor volutpat, eros nulla malesuada augue, vitae consectetuer quam quam eu nibh. Suspendisse laoreet dignissim neque. Sed semper. Nullam facilisis. Nam tristique sapien. Sed turpis justo, lobortis sit amet, posuere at, tristique id, nunc. Vestibulum rutrum dui at lectus. Sed enim. Ut eros eros, pulvinar a, vestibulum sit amet, ornare ac, eros. Suspendisse imperdiet.</p>

<p><b>Lorem ipsum dolor sit</b> amet, consectetuer adipiscing elit. Phasellus facilisis, risus at tempor volutpat, eros nulla malesuada augue, vitae consectetuer quam quam eu nibh. Suspendisse laoreet dignissim neque. Sed semper. Nullam facilisis. Nam tristique sapien. Sed turpis justo, lobortis sit amet, posuere at, tristique id, nunc. Vestibulum rutrum dui at lectus. Sed enim. Ut eros eros, pulvinar a, vestibulum sit amet, ornare ac, eros. Suspendisse imperdiet.</p>

<p><b>Lorem ipsum dolor sit</b> amet, consectetuer adipiscing elit. Phasellus facilisis, risus at tempor volutpat, eros nulla malesuada augue, vitae consectetuer quam quam eu nibh. Suspendisse laoreet dignissim neque. Sed semper. Nullam facilisis. Nam tristique sapien. Sed turpis justo, lobortis sit amet, posuere at, tristique id, nunc. Vestibulum rutrum dui at lectus. Sed enim. Ut eros eros, pulvinar a, vestibulum sit amet, ornare ac, eros. Suspendisse imperdiet.</p>

<p><b>Lorem ipsum dolor sit</b> amet, consectetuer adipiscing elit. Phasellus facilisis, risus at tempor volutpat, eros nulla malesuada augue, vitae consectetuer quam quam eu nibh. Suspendisse laoreet dignissim neque. Sed semper. Nullam facilisis. Nam tristique sapien. Sed turpis justo, lobortis sit amet, posuere at, tristique id, nunc. Vestibulum rutrum dui at lectus. Sed enim. Ut eros eros, pulvinar a, vestibulum sit amet, ornare ac, eros. Suspendisse imperdiet.</p>

<p><b>Lorem ipsum dolor sit</b> amet, consectetuer adipiscing elit. Phasellus facilisis, risus at tempor volutpat, eros nulla malesuada augue, vitae consectetuer quam quam eu nibh. Suspendisse laoreet dignissim neque. Sed semper. Nullam facilisis. Nam tristique sapien. Sed turpis justo, lobortis sit amet, posuere at, tristique id, nunc. Vestibulum rutrum dui at lectus. Sed enim. Ut eros eros, pulvinar a, vestibulum sit amet, ornare ac, eros. Suspendisse imperdiet.</p>

<p><b>Lorem ipsum dolor sit</b> amet, consectetuer adipiscing elit. Phasellus facilisis, risus at tempor volutpat, eros nulla malesuada augue, vitae consectetuer quam quam eu nibh. Suspendisse laoreet dignissim neque. Sed semper. Nullam facilisis. Nam tristique sapien. Sed turpis justo, lobortis sit amet, posuere at, tristique id, nunc. Vestibulum rutrum dui at lectus. Sed enim. Ut eros eros, pulvinar a, vestibulum sit amet, ornare ac, eros. Suspendisse imperdiet.</p>

</div>
</td>
<td></td>
</tr>
</table>

<!-- End of scroll table -->

 

desertridgedesigns



 
Msg#: 4467294 posted 12:38 am on Sep 2, 2012 (gmt 0)

What are you trying to do here ? Scroll it up an down ?

lucy24

WebmasterWorld Senior Member lucy24 us a WebmasterWorld Top Contributor of All Time Top Contributors Of The Month



 
Msg#: 4467294 posted 8:03 am on Sep 2, 2012 (gmt 0)

Though the scroll box works as it should, the contents also take up vertical space below my intended page, pushing the bottom of the page down below any contents on the page, leaving a big empty space.

It's browser-specific. The body will always be as wide as your viewport. But the height will be either the height of the viewport or the height of the contents.

body {border: 1px solid red;}
table {border: 1px solid blue;}

Comment-out the table, leaving only the empty body and maybe an &nbsp; or so, and you can see what different browsers make of it. On my system, webkit fills the vertical space; the others (mozilla & opera) stop when the content runs out.

Incidentally, ahem

::cough-cough::

you could have pasted-in that paragraph ONCE, with note to make a bunch of copies of it.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved