Hello John,
I tried swapping the container and content divs as these were indeed reversed in relation to your example. However, I still must be doing something wrong. With how I’ve attempted to re-code my page to implement these changes, the header is shifting to the left - when I say to the left, I mean left of the content, in the green area that fills the side of the monitor. In addition, when I test the page in IE7 after making these changes, I can’t see my text at all (it was fine before). That’s important to me because I want to be able to reach people that might be using older equipment/browsers. This is before adding the Java for the page scroll function as I’m first trying to get the page to still look the same after I make adjustments to the code.
I am also seeing the footer expand out in width to the right a bit vs. the width of the content. If I save your code example as a page, I’m also seeing that happening there as well (along with a similar - though shadowed version - spillover in the header) Not sure what’s causing this as they should match the content in width. This is happening in every browser I’ve tried it with. These were OK with my existing code.
I’ve posted some “dummy” code below to show how I left things in one of my pages (similar to the first one, but not the same) before adding the Java for the scroll fix.
I’d be lying if I said this didn’t make me nervous. That has nothing to do with you! 
It’s just my own worries. Implementing this is basically the last piece to “fixing” my site before I’ll host it and make any last little adjustments, etc., that may be needed. It’s frustrating that I can’t figure out myself how to implement this correctly. I’m very sorry to keep coming back to ask for more, but am grateful that you obviously know what you’re doing and are willing to help…
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" >
<title>XXX</title>
<meta name="description" content="XXX">
<meta name="keywords" content="XXX">
<meta name="geo.region" content="XXX">
<meta name="geo.placename" content="XXX">
<meta name="geo.position" content="XXX">
<meta name="ICBM" content="XXX">
<style type="text/css">
<!--
Access-Control-Allow-Origin: *
@font-face {
font-family: 'Century Gothic';
src: url('../webfonts/CenturyGothic.eot');
src: local(☺), url('../Fonts/CenturyGothic.woff') format('woff'), url
('../Fonts/CenturyGothic.ttf') format('truetype'), url
('../Fonts/CenturyGothic.svg') format('svg');
}
html, body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
height:100%;
width:100%;
background-color: #C9D6A0;
margin: 0;
padding: 0;
color: #000;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}
/* ~~ Element/tag selectors ~~ */
ul, ol, dl { /* Due to variations between browsers, it's best practices to zero
padding and margin on lists. For
consistency, you can either specify the amounts you want here, or on the list
items (LI, DT, DD) they
contain. Remember that what you do here will cascade to the .nav list unless
you write a more specific
selector. */
margin: 0;
text-shadow: #A2C8CA 0 0 1.00px;
font-smoothing: antialiased;
text-rendering: optimizeLegibility
color: #AED6D9;
font-weight: 500;
font-size: .92em;
line-height: 150%;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0; /* removing the top margin gets around an issue where
margins can escape
from their containing div. The remaining bottom margin will hold it away from
any elements that follow. */
padding-right: 15px;
padding-left: 15px; /* adding the padding to the sides of the elements
within the divs, instead of the
divs themselves, gets rid of any box model math. A nested div with side padding
can also be used as an
alternate method. */
text-shadow: #A2C8CA 0 0 1.00px;
font-smoothing: antialiased;
text-rendering: optimizeLegibility
color: #AED6D9;
font-weight: 500;
font-size: .92em;
line-height: 150%;
}
a img { /* this selector removes the default blue border displayed in some
browsers around an image when it
is surrounded by a link */
border: none;
}
/* ~~ Styling for your site's links must remain in this order - including the
group of selectors that create the
hover effect. ~~ */
a:link {
color: #AED6D9;
text-decoration: none; /* unless you style your links to look extremely
unique, it's best to
provide underlines for quick visual identification */
}
a:visited {
color: #AED6D9;
text-decoration: underline;
}
a:hover, a:active, a:focus { /* this group of selectors will give a keyboard
navigator the same hover experience
as the person using a mouse. */
text-decoration: none;
}
/* ~~ this fixed width container surrounds the other divs ~~ */
.container {
width: 960px;
padding-top:200px;
background-color: #603B3D;
margin: 0 auto; /* the auto value on the sides, coupled with the width,
centers the layout */
}
/* ~~ the header is not given a width. It will extend the full width of your
layout. It contains an image
placeholder that should be replaced with your own linked logo ~~ */
.header {
height: 200px;
width: 960px;
background-color: #603B3D;
text-align: left;
position: fixed;
z-index: 1000;
}
.header img {float: left;}
.header ul#noBullet {
margin: 5px 0 0 400px;
text-align: center;
list-style: none;
}
.header ul li {
width: 127px;
margin: 0px;
float: left;
}
/* ~~ This is the layout information. ~~
1) Padding is only placed on the top and/or bottom of the div. The elements
within this div have padding on
their sides. This saves you from any "box model math". Keep in mind, if you add
any side padding or border
to the div itself, it will be added to the width you define to create the
*total* width. You may also choose to
remove the padding on the element in the div and place a second div within it
with no width and the padding
necessary for your design.
*/
.content {
margin: 186px 0 0;
padding: 2px 0;
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
font-size: 1em;
}
#content {
margin:0;
padding:0;
width:100%;
height:100%;
overflow: auto;
}
.bigger { font-size:91%; }
.width { width : 930px;
* + padding-left: 40px;
* padding-left: 40px;
}
.picctr { text-align : center; }
/* ~~ The footer ~~ */
.footer {
height: 21px;
width: 960px;
margin: 0 0 0 -480px;
padding: 9px 0;
position: fixed;
z-index: 999;
bottom: 0;
left: 50%;
background: #603B3D;
}
/* ~~ miscellaneous float/clear classes ~~ */
.fltrt { /* this class can be used to float an element right in your page. The
floated element must precede the
element it should be next to on the page. */
float: right;
margin-left: 8px;
}
.fltlft { /* this class can be used to float an element left in your page. The
floated element must precede the
element it should be next to on the page. */
float: left;
margin-right: 8px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final
element following the last floated
div (within the #container) if the #footer is removed or taken out of the
#container */
clear:both;
height:0;
font-size: 1px;
line-height: 0px;
}
body,td,th {
color: #AED6D9;
}
-->
</style>
<script type="text/javascript" src="textshadow.js"></script>
</head>
<body>
<div class="header"><img src="XXX" width="443" height="186" alt="XXX"><ul>
<li><a href="XXX"><img src="XXX" width="127"
height="90" alt="XXX"></a></li>
<li><a href="XXX"><img src="XXX" width="127"
height="90" alt="XXX"></a></li>
<li><a href="XXX"><img src="XXX" width="127" height="90"
alt="XXX"></a></li>
<li><a href="XXX"><img src="XXX" width="127" height="90"
alt="XXX"></a></li>
<li><a href="XX"><img src="XXX" width="127" height="90"
alt="XXX"></a></li>
<li><a href="XXX"><img src="XXX" width="127" height="90"
alt="XXX"></a></li>
<li><a href="XXX"><img src="XXX" width="127" height="90"
alt="XXX"></a></li>
<li><a href="XXX"><img src="XXX" width="127"
height="90" alt="XXX"></a></li>
</ul></div>
<div class="content" id="content"><div class="container">
<p> </p>
<p><div class="picctr">
<img src="XXX.jpg" width="800" height="429" alt="xxx">
</div></p>
<p>This is fake text to fill space here and replace my actual content.</p>
<p>-----------------------------------------</p>
<p>This is generic text inserted to show the problem I'm having on my page
with scrolling up too much when using the page up/down keyboard buttons. I
need to limit/reduce the scroll when performed in this manner by the height of
the header and any padding directly below it so when one hits page down, no
text/content is missed out on without having to adjust their position on the
page with arrow keys, a thumbwheel, etc. This is generic text inserted to show
the problem I'm having on my page with scrolling up too much when using the
page up/down keyboard buttons. I need to limit/reduce the scroll when
performed in this manner by the height of the header and any padding directly
below it so when one hits page down, no text/content is missed out on without
having to adjust their position on the page with arrow keys, a thumbwheel,
etc.</p>
<p>This is generic text inserted to show the problem I'm having on my page
with scrolling up too much when using the page up/down keyboard buttons. I
need to limit/reduce the scroll when performed in this manner by the height of
the header and any padding directly below it so when one hits page down, no
text/content is missed out on without having to adjust their position on the
page with arrow keys, a thumbwheel, etc. This is generic text inserted to show
the problem I'm having on my page with scrolling up too much when using the
page up/down keyboard buttons. I need to limit/reduce the scroll when
performed in this manner by the height of the header and any padding directly
below it so when one hits page down, no text/content is missed out on without
</p>
<p><div class="picctr"><img src="XXX.jpg" width="800" height="430"
alt="xxx"></div></p>
<p>This is generic text inserted to show the problem I'm having on my page
with scrolling up too much when using the page up/down keyboard buttons. I
need to limit/reduce the scroll when performed in this manner by the height of
the header and any padding directly below it so when one hits page down, no
text/content is missed out on without having to adjust their position on the
page with arrow keys, a thumbwheel, etc. This is generic text inserted to show
the problem I'm having on my page with scrolling up too much when using the
</p><br>
<p>This is generic text inserted to show the problem I'm having on my page
with scrolling up too much when using the page up/down keyboard buttons. I
need to limit/reduce the scroll when performed in this manner by the height of
:
</p><br>
<ul>
<div class=width><li>This is text to fill a line item in this dummy page,
to replace the actual content I'll be using for my site once it's
public</li></div>
<br>
<div class=width><div class="listpad" style="padding-right:15px"><li>This
is text to fill a line item in this dummy page, to replace the actual content
I'll be using for my site once it's public. I'm trying to hopefully get the
quirks worked out that are being encountered.</li></div></div>
<br>
<div class=width><div class="listpad" style="padding-right:15px"><li>This
is text to fill a line item in this dummy page, to replace the actual content
I'll be using for my site once it's public</li></div></div>
<br>
<div class=width><div class="listpad" style="padding-right:15px"><li>This
is text to fill a line item in this dummy page, to replace the actual content
I'll be using for my site once it's public</li></div></div>
<br>
<div class=width><li>This is text to fill a line item in this dummy page,
to replace the actual content I'll be using for my site once it's public. I'm
trying to hopefully get the quirks worked out that are being
encountered.</li></div>
<br>
<div class=width><div class="listpad" style="padding-right:15px"><li>This
is text to fill a line item in this dummy page, to replace the actual content
I'll be using for my site once it's public</li></div></div>
<br>
<div class=width><div class="listpad" style="padding-right:15px"><li>This
is text to fill a line item in this dummy page, to replace the actual content
I'll be using for my site once it's public. I'm trying to hopefully get the
quirks worked out that are being encountered.</li></div></div></ul>
<p><div class="picctr"><img src="XXX.jpg" width="800" height="429"
alt="xxx"></div></p>
<p>This is generic text inserted to show the problem I'm having on my page
with scrolling up too much when using the page up/down keyboard buttons. I
need to limit/reduce the scroll when performed in this manner by the height of
the header and any padding directly below it so when one hits page down, no
text/content is missed out on without having to adjust their position on the
page with arrow keys, a thumbwheel, etc. This is generic text inserted to show
the problem I'm having on my page with scrolling up too much when using the
</p>
<p>This is generic text inserted to show the problem I'm having on my page
with scrolling up too much when using the page up/down keyboard buttons. I
need to limit/reduce the scroll when performed in this manner by the height of
the header and any padding directly below it so when one hits page down, no
text/content is missed out on without having to adjust their position on the
page with arrow keys, a thumbwheel, etc. This is generic text inserted to show
the problem I'm having on my page with scrolling up too much when using the
page up/down keyboard buttons. I need to limit/reduce the scroll when
performed in this manner by the height of the header and any padding directly
below it so when one hits page down, no text/content is missed out on without
</p><br>
<p>This is generic text inserted to show the problem I'm having <span
class=bigger>(please also see the smaller text near the bottom of this
page)</span>:</p><br>
<ul>
<div class=width><div class="listpad" style="padding-right:15px"><li>This
is text to fill a line item in this dummy page, to replace the actual content
I'll be using for my site once it's public. I'm trying to hopefully get the
quirks worked out that are being encountered.</li></div></div>
<br>
<div class=width><li>This is text to fill a line item in this dummy page,
to replace the actual content I'll be using for my site once it's public <br>
I'm trying to hopefully get the quirks worked out that are being
encountered.
</li></div><br>
<div class=width><li>This is text to fill a line item in this dummy page,
to replace the actual content I'll be using for my site once it's
public</li></div>
<br>
<div class=width><li>This is text to fill a line item in this dummy page,
to replace the actual content I'll be using for my site once it's
public</li></div>
<br>
<div class=width><li>This is text to fill a line item in this dummy page,
to replace the actual content I'll be using for my site once it's
public</li></div>
</ul>
<p><div class="picctr">
<img src="XXX.jpg" width="800" height="429" alt="xxx"></div></p>
<p>This is generic text inserted to show the problem I'm having on my page
with scrolling up too much when using the page up/down keyboard buttons. I
need to limit/reduce the scroll when performed in this manner by the height of
the header and any padding directly below it so when one hits page down, no
text/content is missed out on without having to adjust their position on the
page with arrow keys, a thumbwheel, etc. This is generic text inserted to show
the problem I'm having on my page with scrolling up too much when using the
page up/down keyboard buttons. <br>
</p>
<br>
<p>This is generic text inserted to show the problem I'm having on my page
with scrolling up too much when using the page up/down keyboard buttons. I
need to limit/reduce the scroll when performed in this manner by the height of
the header and any padding directly below it so when one hits page down, no
text/content is missed out on without having to adjust their position on the
page with arrow keys, a thumbwheel, etc.</p>
<p> </p>
<HR color="A2C8CA">
<p> </p>
<p style="font-size:.8em;">Some additional details on the above:<br>
</p><ul style="font-size:.8em;">
<div class=width><li>This is text to fill a line item in this dummy page,
to replace the actual content I'll be using for my site once it's
public</li></div>
<br>
<div class=width><div class="listpad" style="padding-right:15px"><li>This
is text to fill a line item in this dummy page, to replace the actual content
I'll be using for my site once it's publicThis is text to fill a line item in
this dummy page, to replace the actual content I'll be using for my site once
it's public</li></div></div><br>
<div class=width><li>This is text to fill a line item in this dummy page,
to replace the actual content I'll be using for my site once it's
public</li></div><br>
<div class=width><li>This is text to fill a line item in this dummy page,
to replace the actual content I'll be using for my site once it's
public</li></div><br>
<div class=width><div class="listpad" style="padding-right:15px"><li>This
is text to fill a line item in this dummy page, to replace the actual content
I'll be using for my site once it's publicThis is text to fill a line item in
this dummy page, to replace the actual content I'll be using for my site once
it's public</li></div></div><br>
<div class=width><li>This is text to fill a line item in this dummy page,
to replace the actual content I'll be using for my site once it's
public</li></div><br>
<div class=width><div class="listpad" style="padding-right:15px"><li>This
is generic text inserted to show the problem I'm having on my page
with scrolling up too much when using the page up/down keyboard buttons. I
need to limit/reduce the scroll when performed in this manner by the height of
the header and any padding directly below it so when one hits page down, no
text/content is missed out on without having to adjust their position on the
page with arrow keys, a thumbwheel, etc. This is generic text inserted to show
the problem I'm having on my page with scrolling up too much when using the
page up/down keyboard buttons. I need to limit/reduce the scroll when
performed in this manner by the height of the header and any padding directly
below it so when one hits page down, no text/content is missed out
on</li></div></div>
</ul>
<BR>
<p style="font-size:.8em;">Final items noted to demonstrate my site
issues:</p>
<ul style="font-size:.8em;"><div class=width><li>This is final item
one</li></div>
<div class=width><li>Description for final line item two</li></div>
<div class=width><li>Third item</li></div>
<div class=width><li>...and last listed item</li></div></ul></p>
<p style="font-size:.8em;">All other pre-payment levels have no maximum
percentage of useage per season.</p><br>
<p style="font-size:.8em;">This is generic text inserted to show the
problem I'm having on my page
with scrolling up too much when using the page up/down keyboard buttons. I
need to limit/reduce the scroll when performed in this manner by the height of
the header and any padding directly below it so when one hits page down</p>
<br>
<p> </p>
<!-- end .container --></div>
<!-- end .content --></div>
<div class="footer">
<p><span class=bigger><img src="Brown ftr.png" width="147" height="19"><a
target="_blank" href="XXX">XXX <img src="XXX" width="15" height="15"
alt="XXX"></a>, <a target="_blank"
href="XXX">XXX <img src="XXX" width="15" height="15" alt="XXX"></a>, <a
target="_blank" href="XXX">XXX <img src="XXX" width="15" height="14"
alt="XXX"></a></span></p></div>
<!-- end .footer --></div>
</body>
</html>