how do I show scrollbars when they are needed, and hide when not? - HTML forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

how do I show scrollbars when they are needed, and hide when not?

azoogloptomy

2:12 am on Aug 24, 2003 (gmt 0)

Hi, I have a page that contains an iFrame that has pages loaded into it that may or may not need a vertical scrollbar. How do I get it to not show a scrollbar when it isn't needed, and not have the extra space showing where it would show up if it were?

The iFrame is in a table that is nested within another and the height is set to 100% so that it fills the cell.

I have tried about everyting I can think of, please help if possible.

Here is the code:

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bottommargin="0" rightmargin="0">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="bottom"><table width="780" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="bottom" bgcolor="#000000"><table width="780" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top"><table width="780" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="314" valign="top"><table width="780" height="314" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="12" valign="top" background="images/topbar.gif"><img src="images/spacer.gif" width="1" height="1"></td>
</tr>
<tr>
<td valign="top"><table width="780" height="285" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="288" height="108" valign="top"> </td>
<td width="204" rowspan="3" valign="top"> </td>
<td width="288" height="108" valign="top"> </td>
</tr>
<tr>
<td width="288" height="20" valign="top"><table width="288" height="20" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td> </td>
<td width="1" bgcolor="#000000"><img src="images/spacer.gif" width="1" height="1"></td>
<td> </td>
<td width="1" bgcolor="#000000"><img src="images/spacer.gif" width="1" height="1"></td>
<td> </td>
<td width="1" bgcolor="#000000"><img src="images/spacer.gif" width="1" height="1"></td>
<td> </td>
</tr>
</table></td>
<td width="288" height="20" valign="top"><table width="288" height="20" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td> </td>
<td width="1" bgcolor="#000000"><img src="images/spacer.gif" width="1" height="1"></td>
<td> </td>
<td width="1" bgcolor="#000000"><img src="images/spacer.gif" width="1" height="1"></td>
<td> </td>
<td width="1" bgcolor="#000000"><img src="images/spacer.gif" width="1" height="1"></td>
<td> </td>
</tr>
</table></td>
</tr>
<tr>
<td width="288" height="157" valign="top"> </td>
<td width="288" height="157" valign="top"> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="17" valign="top"><table width="780" height="17" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td width="492" background="images/middlebar.gif"><img src="images/spacer.gif" width="1" height="1"></td>
<td width="87" background="images/guy_overlap.jpg"><img src="images/spacer.gif" width="1" height="1"></td>
<td width="201" background="images/middlebar.gif"><img src="images/spacer.gif" width="1" height="1"></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td valign="top"><table width="780" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr valign="top" bgcolor="#FFFFFF">
<td width="2" bgcolor="#FFFFFF"><img src="images/spacer.gif" width="1" height="1"></td>
<td width="10" bgcolor="#FFFFFF" valign="bottom">
<table width="10" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#abb9c3"><img src="images/spacer.gif" width="1" height="1"></td>
</tr>
<tr>
<td height="3"><img src="images/spacer.gif" width="1" height="1"></td>
</tr>
</table></td>
<td width="2" bgcolor="#FFFFFF"><img src="images/spacer.gif" width="1" height="1"></td>
<td width="476" bgcolor="#FFFFFF"><iframe src="home.htm" name="content" frameborder="0" marginheight="0" marginwidth="0" height="100%" width="100%" scrolling="auto">
</iframe></td>
<td width="2" bgcolor="#FFFFFF"><img src="images/spacer.gif" width="1" height="1"></td>
<td width="288" bgcolor="ededed"> </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td height="1" bgcolor="#000000"><img src="images/spacer.gif" width="1" height="1"></td>
</tr>
<tr>
<td height="12" background="images/topbar.gif"><img src="images/spacer.gif" width="1" height="1"></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</body>

And the page being loaded:

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" >
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="8" class="contentbg"><img src="images/spacer.gif" width="1" height="1"></td>
<td valign="top" class="contentbg"><p> </p>
</td>
<td width="10" class="contentbg"><img src="images/spacer.gif" width="1" height="1"></td>
</tr>
</table>
</body>

Thanks in advance for the help.

daosmith

2:58 pm on Aug 24, 2003 (gmt 0)

10+ Year Member

Hi azoogloptomy,

I think what you need here is to use the 'overflow: auto' style sheet property in a <div> tag that encloses all the content of the page that lives in your iframe... you may even be able to make it a property of the iframe page's body tag.

This should show a scrollbar only when the content is longer than the window height.

However, this is not a particularly elegant method, really - it is probably worth your time taking a look at using an external style sheet that is included in all possible pages that reside in your iframe; take a look in the CSS forum for more info on this sort of thing.

Hope this helps :)

hartlandcat

4:25 pm on Aug 25, 2003 (gmt 0)

10+ Year Member

By defaulyt, Internet Explorer will show a scrollbar whether it's needed or not. Netscape and Opera won't.