...

View Full Version : Page Expansion Problem



Psionicsin
09-16-2010, 11:08 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.

funkymonk
09-16-2010, 11:18 PM
wihch browser are you having this problem in?

Psionicsin
09-16-2010, 11:21 PM
wihch browser are you having this problem in?

Firefox and Chrome

EDIT: And IE and Safari

funkymonk
09-16-2010, 11:24 PM
so youre saying the full depensions of the page are too long in height or in width?

Pepineros
09-16-2010, 11:27 PM
Looking at the source code, it seems you're closing the body tag twice. I'm no expert at html but I'm pretty sure that's not the way it works. Also, according to my Webdeveloper toolbar, the footer part of the page (with the 'copyright' message and certification links) is 675px high, as is the part above that, essentially the body. Have you got code for us to look at?

Psionicsin
09-16-2010, 11:42 PM
Yep.

Indextest.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<meta name="author" content="Brandon Moner" />
<meta name="keywords" content="photography, pictures, photos, portraits, camera, senior, family, children, baby, newborn, special, wedding, modeling, fashion, spring, holiday" />
<meta name="description" content="Ruth Olson Photography is a photography studio located in Westland, MI that specializes in all forms of portraiture." />
<meta name="language" content="English" />
<meta name="copyright" content="Ruth Olson Photography" />
<title>Ruth Olson Photography</title>

<link rel="stylesheet" type="text/css" media="screen, print, projection" href="./css/index.css"></link>
<?php require("./js/jsref.htm"); ?>
</head>

<body>
<div id="home">
<div id="background"></div>
<div id="headerxmedia"><?php require("header/header.php"); ?>
</div>
<div id="navigationxmedia"><?php require("navigation/navigation.php"); ?>
</div>
<div id="stagexmedia"><?php require("content/homegal.php"); ?></div>
<div id="footerxmedia"><?php require("footer/footer.php"); ?>
</div>
</div>
</body>
</html>

Header.php:


<div id="header">
<div id="logobutton"><a href="http://www.rutholsonphoto.com/" title="logo"></a></div>
<div id="facebookbutton"><a href="http://www.facebook.com/pages/Westland-MI/Ruth-Olson-Photography/328300073878?" title="facebook"></a></div>
<div id="twitterbutton"><a href="http://twitter.com/rutholsonphoto" title="twitter"></a></div>
<div id="rssbutton"><a href="http://twitter.com/statuses/user_timeline/67102189.rss" title="rss"></a></div>
</div>


Footer.php:


<div id="pid0footer">
<div id="background"></div>
<div id="certification"></div>
<div id="copyrighttext">
<p>Copyright &copy; 2003-2010 Rutholsonphoto.com</p>
</div>
</div>


Homegal.php:

<script type="text/javascript" src="./js/jqFancyTransitions.1.8.js"></script>

<div id='slideshowHolder'>
<img src='./content/homegalmedia/img01.jpg' alt=''/>
<img src='./content/homegalmedia/img02.jpg' alt=''/>
<img src='./content/homegalmedia/img03.jpg' alt=''/>
<img src='./content/homegalmedia/img04.jpg' alt=''/>
<img src='./content/homegalmedia/img05.jpg' alt=''/>
<img src='./content/homegalmedia/img06.jpg' alt=''/>
<img src='./content/homegalmedia/img07.jpg' alt=''/>
<img src='./content/homegalmedia/img08.jpg' alt=''/>
<img src='./content/homegalmedia/img09.jpg' alt=''/>
<img src='./content/homegalmedia/img10.jpg' alt=''/>
</div>

<script>
$('#slideshowHolder').jqFancyTransitions({ width: 770, height: 540, strips: 15, delay: 3000, position: 'top', direction: 'random', navigation: false, links: false });
</script>

Psionicsin
09-16-2010, 11:55 PM
so youre saying the full dimensions of the page are too long in height or in width?

Too long in height. I specifically set it to 675px tall as the site design doesn't call for needless scrolling.

I didn't notice it until just yesterday that this problem is present, and I have no idea why.Width wise, from what I can visually tell, the site is just fine.

Psionicsin
09-16-2010, 11:58 PM
Looking at the source code, it seems you're closing the body tag twice. I'm no expert at html but I'm pretty sure that's not the way it works. Also, according to my Webdeveloper toolbar, the footer part of the page (with the 'copyright' message and certification links) is 675px high, as is the part above that, essentially the body. Have you got code for us to look at?

I'm not seeing this double body tag closing when I open up source and developer tools.

Pepineros
09-17-2010, 12:06 AM
You're right, my mistake. I think I found it though: you seem to open the <div id="background"> twice, once just after the body tag (which is correct, I guess) and once just before the copyright notice, at the bottom of the page (inside the footerxmedia and pid0footer divs). I gleaned this information by rightclick -> view source, and seeing as you're using .php files I'm not sure where in your code you'll find this, but I think that's what's causing the problem. Maybe you call two php files which both have the background div in them?

.:EDIT:. I think both the indextest.php and footer.php files have the background div in them. If you call the footer.php file inside the indextest.php file, the background div is included twice. Could that be it?

Psionicsin
09-17-2010, 12:28 AM
You're right, my mistake. I think I found it though: you seem to open the <div id="background"> twice, once just after the body tag (which is correct, I guess) and once just before the copyright notice, at the bottom of the page (inside the footerxmedia and pid0footer divs). I gleaned this information by rightclick -> view source, and seeing as you're using .php files I'm not sure where in your code you'll find this, but I think that's what's causing the problem. Maybe you call two php files which both have the background div in them?

.:EDIT:. I think both the indextest.php and footer.php files have the background div in them. If you call the footer.php file inside the indextest.php file, the background div is included twice. Could that be it?

Haha that was it! Thank you! Pays to have a second set of eyes for sure!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum