danhouston
07-12-2006, 07:27 AM
Hi all. I have read lots of hacks, tricks, etc. on how to keep things in the viewport of the browser window, but I seem to be missing something. I've stripped out all of the things I have tried based on reading other websites and will post the code I started with.
My goal is to have no browser scroll bars unless they make the window smaller than the minimum size.
Style sheet:
html {
width: 100%;
background: #FFFFDD;
padding: 0em 0em 0em 0em;
}
body, div, td, th, h2, h3, h4 { /* redundant rules for bad browsers */
font-family: trebuchet ms,arial,verdana,sans-serif;
font-size: small;
voice-family: "\"}\"";
voice-family: inherit;
color: #333;
}
th {
background: #FFF3B3;
}
a { color: #06C; }
a:hover { color: #333; }
a:active { color: #000; }
p { line-height: 140%; }
h1 {
font-family: trebuchet ms,arial,verdana,sans-serif;
font-weight: bold;
font-size: 140%;
color: #333;
padding-bottom: 2px;
border-bottom: 1px dotted #CCC;
margin: 0;
}
.note {
background: #EEE;
padding: 4px;
font-family: tahoma,verdana,sans-serif;
font-size: 85%;
line-height: 130%;
}
#main {
text-align: left;
border: 1px solid #666;
background: #FFFDF3;
clear: both;
width: 100%;
margin-top: -1px;
}
#bodyarea {
font: 12px arial;
padding: 0px;
width: 100%;
height: 500;
overflow: auto;
}
#smallbodyarea {
padding: 0px;
width: 100%;
height: 183;
overflow: auto;
}
#smallbodyarea2row {
padding: 0px;
width: 100%;
height: 154;
overflow: auto;
}
#leftbodyarea {
padding: 0px;
width: 100%;
height: 250;
overflow: auto;
border: thin solid black
}
#rightbodyarea {
padding: 0px;
width: 100%;
height: 250;
overflow: auto;
border: thin solid black
}
#topbar {
padding-bottom: 0.5em;
font-family: trebuchet ms,verdana,sans-serif;
font-weight: bold;
font-size: 200%;
}
#topbar a { text-decoration: none; color: #000; }
#topbar a:hover { text-decoration: underline; }
/*///////////// Tabs Code ////////////*/
#tabs {
font: 16px arial;
clear: both;
text-align: center;
width: 100%;
}
#tabs ul {
display: inline;
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
}
#tabs li { float: left; }
#tabs a,span { width: 150px; }
#tabs span {
font-weight: bold;
position: relative;
top: 0;
margin: 0 2px 0 0;
float: left;
background: #FFF3B3;
border-right: 1px solid #666;
border-top: 1px solid #666;
border-left: 1px solid #666;
padding: 6px 4px 6px 10px;
text-decoration: none;
color: #333;
}
#tabs a {
position: relative;
top: 0;
margin: 1px 2px 0 0;
float: left;
background: #FFFAE1;
border-right: 1px solid #AAA;
border-top: 1px solid #AAA;
border-left: 1px solid #AAA;
padding: 5px 4px 5px 10px;
text-decoration: none;
color: #333;
}
#tabs a:hover {
background: #FFF7CD;
position: relative;
top: 0;
padding: 5px 4px 6px 10x;
margin-top: 0px;
}
#tabs a.active {
position: relative;
top: 0;
margin: 0 2px 0 0;
float: left;
background: #FFF3B3;
border-right: 1px solid #666;
border-top: 1px solid #666;
border-left: 1px solid #666;
padding: 6px 4px 6px 10px;
text-decoration: none;
color: #333;
}
#tabs a.active:hover {
position: relative;
top: 0;
margin: 0 2px 0 0;
float: left;
background: #FFF3B3;
border-right: 1px solid #666;
border-top: 1px solid #666;
border-left: 1px solid #666;
padding: 6px 4px 6px 10px;
text-decoration: none;
color: #333;
}
#subtabs ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#subtabs li {
float: left;
padding: 0 8px 0 8px;
border-left: 1px solid #CCC;
white-space: nowrap;
}
#subtabs li:first-child { border-left: none; }
#subtabs {
font-family: tahoma,verdana,sans-serif;
font-size: 85%;
background: #FFF3B3;
color: #666;
padding: 5px 7px 7px 7px; /* for All other Browsers */
}
Sample Page using style sheet:
<HTML>
<HEAD>
<TITLE>DBSS</TITLE>
<style type="text/css" media="all">@import "style.css";</style>
</HEAD>
<div id="topbar"></div>
<div id="tabs">
<ul>
<li><a href="">General</a></li>
<li><span>Oracle</span></li>
<li><a href="">Admin</a></li>
</ul>
</div>
<div id="main">
<div id="subtabs">
<ul>
<li><a href="">Search</a></li>
<li><a href=""9>Domain Accounts</a></li>
<li>DBSS Link</li>
<li><a href="">Work Log</a></li>
<li><a href="">Shift Turnover</a></li>
<li><a href="">Reports</a></li>
<li><a href="">Helpful Links</a></li>
</ul>
</div>
<div id="bodyarea">
<TABLE width="100%">
<TR>
<td valign="TOP" width="50%">
<div id="leftbodyarea">
<TABLE border="0" width="100%" SUMMARY="Search results by Application.">
<CAPTION ALIGN="CENTER">Application Detail</CAPTION>
<TR>
<TD scope="ROW"> </TD>
<TD><A HREF="" NAME="Edit Application">Edit Application</A></TD>
</TR>
<TR>
<TH ALIGN="right" width="200" bgcolor="blue" scope="ROW">Application Name</TH>
<TD> </TD>
</TR>
<TR>
<TH ALIGN="right" width="200" scope="ROW">Acronym</TH>
<TD> </TD>
</TR>
<TR>
<TH ALIGN="right" width="200" scope="ROW">EIR Index</TH>
<TD> </TD>
</TR>
<TR>
<TH ALIGN="right" width="200" scope="ROW">Application Status</TH>
<TD> </TD>
</TR>
<TR>
<TH ALIGN="right" valign="top" width="200">Notes</TH>
<TD SCOPE="ROW">
 
</TD>
</TR>
</TABLE>
</div>
</td>
<td valign="TOP" width="50%">
<div id="rightbodyarea">
<TABLE border="0" width="100%" SUMMARY="Search results by Application.">
<CAPTION ALIGN="CENTER">Instance/Server List</CAPTION>
<TR>
<TH ALIGN="left" scope="ROW">Instance Name</TH>
<TH ALIGN="left">Server Hostname</TH>
<TH ALIGN="left">Connect String</TH>
</TR>
<TR>
<TD scope="ROW"><A HREF="" NAME="qtest10">qtest10</A></TD>
<TD><A HREF="" NAME="test06c">test06c</A></TD>
<TD><A HREF="" NAME="qtest10">qtest10</A></TD>
</TR>
<TR>
<TD scope="ROW"><A HREF="" NAME="test01">test01</A></TD>
<TD><A HREF="" NAME="test08b">test08b</A></TD>
<TD><A HREF="" NAME="test01">test01</A></TD>
</TR>
<TR>
<TD scope="ROW"><A HREF="" NAME="test01a">test01a</A></TD>
<TD><A HREF="" NAME="test08b">test08b</A></TD>
<TD><A HREF="" NAME="test01a">test01a</A></TD>
</TR>
<TR>
<TD scope="ROW"><A HREF="" NAME="test02">test02</A></TD>
<TD><A HREF="" NAME="test08a">test08a</A></TD>
<TD><A HREF="" NAME="test02">test02</A></TD>
</TR>
<TR>
<TD scope="ROW"><A HREF="" NAME="test02a">test02a</A></TD>
<TD><A HREF="" NAME="test08a">test08a</A></TD>
<TD><A HREF="" NAME="test02a">test02a</A></TD>
</TR>
<TR>
<TD scope="ROW"><A HREF="" NAME="test03">test03</A></TD>
<TD><A HREF="" NAME="test0c6">test0c6</A></TD>
<TD><A HREF="1" NAME="test03">test03</A></TD>
</TR>
<TR>
<TD scope="ROW"><A HREF="" NAME="test03a">test03a</A></TD>
<TD><A HREF="" NAME="test0c6">test0c6</A></TD>
<TD><A HREF="" NAME="test03a">test03a</A></TD>
</TR>
</TABLE>
</div>
</td>
</TABLE>
<HR>
<div id="topbar"></div>
<div id="tabs">
<ul>
<li><span>Contacts</span></li>
<li><a href="">Documentation</a></li>
<li><a href="">Status Detail</a></li>
</ul>
</div>
<div id="main">
<div id="smallbodyarea">
<TABLE border="0" width="100%" SUMMARY="Search results by Application.">
<TR>
<TH ALIGN="left" SCOPE="ROW">Name</TH>
<TH ALIGN="left">Work Phone</TH>
<TH ALIGN="left">E-Mail</TH>
<TH ALIGN="left">Pager</TH>
<TH ALIGN="left">Contact Type</TH>
</TR>
</TABLE>
</div>
</div>
</div>
</div>
</BODY>
</HTML>
In IE I get a vertical scrollbar eventhough there is nothing to scroll. When I use FireFox I get a vertical and horizontal scrollbar with the ability to scroll a little on each, but the whole page is viewable without scrolling.
So, first I'd like to just be able to get rid of the scrollbars as long as the browser is large enough to fit the dimensions of the bodyarea. My next goal is I would like the height to adjust with the browser window...Right now I have the height fixed at 500, but I want the user to be able to control the height by changing the height of their window and not end up with browser scrollbars.
Any help with this would be greatly appreciated.
Thanks,
Dan
My goal is to have no browser scroll bars unless they make the window smaller than the minimum size.
Style sheet:
html {
width: 100%;
background: #FFFFDD;
padding: 0em 0em 0em 0em;
}
body, div, td, th, h2, h3, h4 { /* redundant rules for bad browsers */
font-family: trebuchet ms,arial,verdana,sans-serif;
font-size: small;
voice-family: "\"}\"";
voice-family: inherit;
color: #333;
}
th {
background: #FFF3B3;
}
a { color: #06C; }
a:hover { color: #333; }
a:active { color: #000; }
p { line-height: 140%; }
h1 {
font-family: trebuchet ms,arial,verdana,sans-serif;
font-weight: bold;
font-size: 140%;
color: #333;
padding-bottom: 2px;
border-bottom: 1px dotted #CCC;
margin: 0;
}
.note {
background: #EEE;
padding: 4px;
font-family: tahoma,verdana,sans-serif;
font-size: 85%;
line-height: 130%;
}
#main {
text-align: left;
border: 1px solid #666;
background: #FFFDF3;
clear: both;
width: 100%;
margin-top: -1px;
}
#bodyarea {
font: 12px arial;
padding: 0px;
width: 100%;
height: 500;
overflow: auto;
}
#smallbodyarea {
padding: 0px;
width: 100%;
height: 183;
overflow: auto;
}
#smallbodyarea2row {
padding: 0px;
width: 100%;
height: 154;
overflow: auto;
}
#leftbodyarea {
padding: 0px;
width: 100%;
height: 250;
overflow: auto;
border: thin solid black
}
#rightbodyarea {
padding: 0px;
width: 100%;
height: 250;
overflow: auto;
border: thin solid black
}
#topbar {
padding-bottom: 0.5em;
font-family: trebuchet ms,verdana,sans-serif;
font-weight: bold;
font-size: 200%;
}
#topbar a { text-decoration: none; color: #000; }
#topbar a:hover { text-decoration: underline; }
/*///////////// Tabs Code ////////////*/
#tabs {
font: 16px arial;
clear: both;
text-align: center;
width: 100%;
}
#tabs ul {
display: inline;
list-style-type: none;
margin: 0;
padding: 0;
width: 100%;
}
#tabs li { float: left; }
#tabs a,span { width: 150px; }
#tabs span {
font-weight: bold;
position: relative;
top: 0;
margin: 0 2px 0 0;
float: left;
background: #FFF3B3;
border-right: 1px solid #666;
border-top: 1px solid #666;
border-left: 1px solid #666;
padding: 6px 4px 6px 10px;
text-decoration: none;
color: #333;
}
#tabs a {
position: relative;
top: 0;
margin: 1px 2px 0 0;
float: left;
background: #FFFAE1;
border-right: 1px solid #AAA;
border-top: 1px solid #AAA;
border-left: 1px solid #AAA;
padding: 5px 4px 5px 10px;
text-decoration: none;
color: #333;
}
#tabs a:hover {
background: #FFF7CD;
position: relative;
top: 0;
padding: 5px 4px 6px 10x;
margin-top: 0px;
}
#tabs a.active {
position: relative;
top: 0;
margin: 0 2px 0 0;
float: left;
background: #FFF3B3;
border-right: 1px solid #666;
border-top: 1px solid #666;
border-left: 1px solid #666;
padding: 6px 4px 6px 10px;
text-decoration: none;
color: #333;
}
#tabs a.active:hover {
position: relative;
top: 0;
margin: 0 2px 0 0;
float: left;
background: #FFF3B3;
border-right: 1px solid #666;
border-top: 1px solid #666;
border-left: 1px solid #666;
padding: 6px 4px 6px 10px;
text-decoration: none;
color: #333;
}
#subtabs ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#subtabs li {
float: left;
padding: 0 8px 0 8px;
border-left: 1px solid #CCC;
white-space: nowrap;
}
#subtabs li:first-child { border-left: none; }
#subtabs {
font-family: tahoma,verdana,sans-serif;
font-size: 85%;
background: #FFF3B3;
color: #666;
padding: 5px 7px 7px 7px; /* for All other Browsers */
}
Sample Page using style sheet:
<HTML>
<HEAD>
<TITLE>DBSS</TITLE>
<style type="text/css" media="all">@import "style.css";</style>
</HEAD>
<div id="topbar"></div>
<div id="tabs">
<ul>
<li><a href="">General</a></li>
<li><span>Oracle</span></li>
<li><a href="">Admin</a></li>
</ul>
</div>
<div id="main">
<div id="subtabs">
<ul>
<li><a href="">Search</a></li>
<li><a href=""9>Domain Accounts</a></li>
<li>DBSS Link</li>
<li><a href="">Work Log</a></li>
<li><a href="">Shift Turnover</a></li>
<li><a href="">Reports</a></li>
<li><a href="">Helpful Links</a></li>
</ul>
</div>
<div id="bodyarea">
<TABLE width="100%">
<TR>
<td valign="TOP" width="50%">
<div id="leftbodyarea">
<TABLE border="0" width="100%" SUMMARY="Search results by Application.">
<CAPTION ALIGN="CENTER">Application Detail</CAPTION>
<TR>
<TD scope="ROW"> </TD>
<TD><A HREF="" NAME="Edit Application">Edit Application</A></TD>
</TR>
<TR>
<TH ALIGN="right" width="200" bgcolor="blue" scope="ROW">Application Name</TH>
<TD> </TD>
</TR>
<TR>
<TH ALIGN="right" width="200" scope="ROW">Acronym</TH>
<TD> </TD>
</TR>
<TR>
<TH ALIGN="right" width="200" scope="ROW">EIR Index</TH>
<TD> </TD>
</TR>
<TR>
<TH ALIGN="right" width="200" scope="ROW">Application Status</TH>
<TD> </TD>
</TR>
<TR>
<TH ALIGN="right" valign="top" width="200">Notes</TH>
<TD SCOPE="ROW">
 
</TD>
</TR>
</TABLE>
</div>
</td>
<td valign="TOP" width="50%">
<div id="rightbodyarea">
<TABLE border="0" width="100%" SUMMARY="Search results by Application.">
<CAPTION ALIGN="CENTER">Instance/Server List</CAPTION>
<TR>
<TH ALIGN="left" scope="ROW">Instance Name</TH>
<TH ALIGN="left">Server Hostname</TH>
<TH ALIGN="left">Connect String</TH>
</TR>
<TR>
<TD scope="ROW"><A HREF="" NAME="qtest10">qtest10</A></TD>
<TD><A HREF="" NAME="test06c">test06c</A></TD>
<TD><A HREF="" NAME="qtest10">qtest10</A></TD>
</TR>
<TR>
<TD scope="ROW"><A HREF="" NAME="test01">test01</A></TD>
<TD><A HREF="" NAME="test08b">test08b</A></TD>
<TD><A HREF="" NAME="test01">test01</A></TD>
</TR>
<TR>
<TD scope="ROW"><A HREF="" NAME="test01a">test01a</A></TD>
<TD><A HREF="" NAME="test08b">test08b</A></TD>
<TD><A HREF="" NAME="test01a">test01a</A></TD>
</TR>
<TR>
<TD scope="ROW"><A HREF="" NAME="test02">test02</A></TD>
<TD><A HREF="" NAME="test08a">test08a</A></TD>
<TD><A HREF="" NAME="test02">test02</A></TD>
</TR>
<TR>
<TD scope="ROW"><A HREF="" NAME="test02a">test02a</A></TD>
<TD><A HREF="" NAME="test08a">test08a</A></TD>
<TD><A HREF="" NAME="test02a">test02a</A></TD>
</TR>
<TR>
<TD scope="ROW"><A HREF="" NAME="test03">test03</A></TD>
<TD><A HREF="" NAME="test0c6">test0c6</A></TD>
<TD><A HREF="1" NAME="test03">test03</A></TD>
</TR>
<TR>
<TD scope="ROW"><A HREF="" NAME="test03a">test03a</A></TD>
<TD><A HREF="" NAME="test0c6">test0c6</A></TD>
<TD><A HREF="" NAME="test03a">test03a</A></TD>
</TR>
</TABLE>
</div>
</td>
</TABLE>
<HR>
<div id="topbar"></div>
<div id="tabs">
<ul>
<li><span>Contacts</span></li>
<li><a href="">Documentation</a></li>
<li><a href="">Status Detail</a></li>
</ul>
</div>
<div id="main">
<div id="smallbodyarea">
<TABLE border="0" width="100%" SUMMARY="Search results by Application.">
<TR>
<TH ALIGN="left" SCOPE="ROW">Name</TH>
<TH ALIGN="left">Work Phone</TH>
<TH ALIGN="left">E-Mail</TH>
<TH ALIGN="left">Pager</TH>
<TH ALIGN="left">Contact Type</TH>
</TR>
</TABLE>
</div>
</div>
</div>
</div>
</BODY>
</HTML>
In IE I get a vertical scrollbar eventhough there is nothing to scroll. When I use FireFox I get a vertical and horizontal scrollbar with the ability to scroll a little on each, but the whole page is viewable without scrolling.
So, first I'd like to just be able to get rid of the scrollbars as long as the browser is large enough to fit the dimensions of the bodyarea. My next goal is I would like the height to adjust with the browser window...Right now I have the height fixed at 500, but I want the user to be able to control the height by changing the height of their window and not end up with browser scrollbars.
Any help with this would be greatly appreciated.
Thanks,
Dan