PsionicSin
09-16-2010, 05:37 PM
Hey guys!
Here's the page in question: Ruth Olson Test Page (http://www.rutholsonphoto.com/test_build/indextest.php)
The page dimensions are supposed to be 900*675, yet the page scrollable for for more than the set given height of 675px.
Here's the CSS coding I have:
/*********HOUSES CSS STYLING FOR ALL MASTER PAGES*********/
/***Main Layout CSS***/
#navigationxmedia {
visibility: visible;
position: absolute;
left: 0px;
top: 90px;
z-index: 4;
width: 180px;
}
#headerxmedia {
visibility: visible;
position: absolute;
left: 3px;
top: 0px;
z-index: 5;
width: 897px;
}
#footerxmedia {
visibility: visible;
position: absolute;
left: 0px;
top: 630px;
z-index: 2;
width: 900px;
}
#stagexmedia {
visibility: visible;
position: absolute;
left: 180px;
top: 90px;
z-index: 3;
width: 720px;
height: 540px;
}
#home {
margin: 0px auto 0px auto;
width: 900px;
position: relative;
}
#background {
visibility: visible;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
width: 900px;
height: 675px;
background-color: #282828;
background-image: none;
}
html, body {
padding: 0px;
margin: 0px;
background-color: #282828;
}
/***Header CSS***/
#rssbutton a,
#twitterbutton a,
#facebookbutton a {
background-repeat: no-repeat;
display: block;
height: 62px;
background-position: 0% 0px;
font-size: 62px;
line-height: 62px;
}
#facebookbutton a:hover,
#rssbutton a:hover {
background-position: -63px 0%;
}
#facebookbutton,
#rssbutton {
visibility: visible;
position: absolute;
top: 14px;
z-index: 2;
width: 63px;
height: 62px;
}
#twitterbutton a:hover {
background-position: -64px 0%;
}
#logobutton a:hover {
background-position: -400px 0%;
}
#facebookbutton a {
width: 63px;
background-image: url(../header/headermedia/facebookbutton.png);
}
#twitterbutton a {
width: 64px;
background-image: url(../header/headermedia/twitterbutton.png);
}
#facebookbutton {
left: 658px;
}
#twitterbutton {
visibility: visible;
position: absolute;
left: 722px;
top: 14px;
z-index: 2;
width: 64px;
height: 62px;
}
#logobutton a {
background: url(../header/headermedia/logobutton.png) no-repeat 0% 0px;
display: block;
width: 400px;
height: 82px;
}
#rssbutton a {
width: 63px;
background-image: url(../header/headermedia/rssbutton.png);
}
#logobutton {
visibility: visible;
position: absolute;
left: 24px;
top: 8px;
z-index: 2;
width: 400px;
height: 82px;
}
#rssbutton {
left: 787px;
}
#header {
margin: 0px auto 0px auto;
width: 900px;
position: relative;
}
#shell {
visibility: visible;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
width: 900px;
height: 90px;
background-color: #282828;
background-image: none;
}
/***Footer CSS***/
#copyrighttext p {
font: 13px/16px Arial;
margin: 0px;
color: #C0C0C0;
text-align: left;
}
#copyrighttext {
visibility: visible;
position: absolute;
left: 24px;
top: 15px;
z-index: 2;
width: 279px;
}
#certification {
background: url(../footer/footermedia/certification.png) no-repeat;
visibility: visible;
position: absolute;
left: 689px;
top: 2px;
z-index: 2;
width: 161px;
height: 41px;
}
#pid0footer {
margin: 0px auto 0px auto;
width: 900px;
position: relative;
}
/***Stage CSS***/
/***Navigation CSS***/
.arrowlistmenu{
width: 177px; /*width of accordion menu*/
}
.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
font: bold 14px Arial;
color: white;
background: black url(../navigation/navigationmedia/bar.png) repeat-x center left;
margin: 0px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
cursor: hand;
cursor: pointer;
}
.arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/
background-image: url(../navigation/navigationmedia/baractive.png);
}
.arrowlistmenu .overheader{
background-image: url(../navigation/navigationmedia/barhover.png);
}
.arrowlistmenu ul{ /*CSS for UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}
.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}
.arrowlistmenu ul li a{
color: #c0c0c0;
background: url(../navigation/navigationmedia/arrowbullet.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 80%;
}
.arrowlistmenu ul li a:visited{
color: #c0c0c0;
}
.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #FFFFFF;
background-color: #202020;
}
Does anyone know what could be going on that's making the page longer than what it actually is, and thereby scrolling? Just to clarify, it should NOT be scrollable at all.
Here's the page in question: Ruth Olson Test Page (http://www.rutholsonphoto.com/test_build/indextest.php)
The page dimensions are supposed to be 900*675, yet the page scrollable for for more than the set given height of 675px.
Here's the CSS coding I have:
/*********HOUSES CSS STYLING FOR ALL MASTER PAGES*********/
/***Main Layout CSS***/
#navigationxmedia {
visibility: visible;
position: absolute;
left: 0px;
top: 90px;
z-index: 4;
width: 180px;
}
#headerxmedia {
visibility: visible;
position: absolute;
left: 3px;
top: 0px;
z-index: 5;
width: 897px;
}
#footerxmedia {
visibility: visible;
position: absolute;
left: 0px;
top: 630px;
z-index: 2;
width: 900px;
}
#stagexmedia {
visibility: visible;
position: absolute;
left: 180px;
top: 90px;
z-index: 3;
width: 720px;
height: 540px;
}
#home {
margin: 0px auto 0px auto;
width: 900px;
position: relative;
}
#background {
visibility: visible;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
width: 900px;
height: 675px;
background-color: #282828;
background-image: none;
}
html, body {
padding: 0px;
margin: 0px;
background-color: #282828;
}
/***Header CSS***/
#rssbutton a,
#twitterbutton a,
#facebookbutton a {
background-repeat: no-repeat;
display: block;
height: 62px;
background-position: 0% 0px;
font-size: 62px;
line-height: 62px;
}
#facebookbutton a:hover,
#rssbutton a:hover {
background-position: -63px 0%;
}
#facebookbutton,
#rssbutton {
visibility: visible;
position: absolute;
top: 14px;
z-index: 2;
width: 63px;
height: 62px;
}
#twitterbutton a:hover {
background-position: -64px 0%;
}
#logobutton a:hover {
background-position: -400px 0%;
}
#facebookbutton a {
width: 63px;
background-image: url(../header/headermedia/facebookbutton.png);
}
#twitterbutton a {
width: 64px;
background-image: url(../header/headermedia/twitterbutton.png);
}
#facebookbutton {
left: 658px;
}
#twitterbutton {
visibility: visible;
position: absolute;
left: 722px;
top: 14px;
z-index: 2;
width: 64px;
height: 62px;
}
#logobutton a {
background: url(../header/headermedia/logobutton.png) no-repeat 0% 0px;
display: block;
width: 400px;
height: 82px;
}
#rssbutton a {
width: 63px;
background-image: url(../header/headermedia/rssbutton.png);
}
#logobutton {
visibility: visible;
position: absolute;
left: 24px;
top: 8px;
z-index: 2;
width: 400px;
height: 82px;
}
#rssbutton {
left: 787px;
}
#header {
margin: 0px auto 0px auto;
width: 900px;
position: relative;
}
#shell {
visibility: visible;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
width: 900px;
height: 90px;
background-color: #282828;
background-image: none;
}
/***Footer CSS***/
#copyrighttext p {
font: 13px/16px Arial;
margin: 0px;
color: #C0C0C0;
text-align: left;
}
#copyrighttext {
visibility: visible;
position: absolute;
left: 24px;
top: 15px;
z-index: 2;
width: 279px;
}
#certification {
background: url(../footer/footermedia/certification.png) no-repeat;
visibility: visible;
position: absolute;
left: 689px;
top: 2px;
z-index: 2;
width: 161px;
height: 41px;
}
#pid0footer {
margin: 0px auto 0px auto;
width: 900px;
position: relative;
}
/***Stage CSS***/
/***Navigation CSS***/
.arrowlistmenu{
width: 177px; /*width of accordion menu*/
}
.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
font: bold 14px Arial;
color: white;
background: black url(../navigation/navigationmedia/bar.png) repeat-x center left;
margin: 0px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
cursor: hand;
cursor: pointer;
}
.arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/
background-image: url(../navigation/navigationmedia/baractive.png);
}
.arrowlistmenu .overheader{
background-image: url(../navigation/navigationmedia/barhover.png);
}
.arrowlistmenu ul{ /*CSS for UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}
.arrowlistmenu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}
.arrowlistmenu ul li a{
color: #c0c0c0;
background: url(../navigation/navigationmedia/arrowbullet.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 80%;
}
.arrowlistmenu ul li a:visited{
color: #c0c0c0;
}
.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #FFFFFF;
background-color: #202020;
}
Does anyone know what could be going on that's making the page longer than what it actually is, and thereby scrolling? Just to clarify, it should NOT be scrollable at all.