Template shifts if it's not over certain length

airbornflght · April 2009

Ok, on my website if the page isn't over a certain length it shifts to the right 3-5 pixels for some reason. I can't figure it out and it is driving me crazy. It only happens on FF too, IE7 is fine.

/* CSS Document */

body{
	padding:11px 0 14px 0;
	margin:0;
	background-color:#EFEFDF;
	color:#000;
}
div, h1, h2, p, form, label, input, textarea, img, span{
	margin:0; padding:0;
}

ul{
	margin:0; 
	padding:0; 
	list-style-type:none;
	font-size:0;
}
.spacer{
	clear:both; 
	font-size:0;
	line-height:0;
}
/*------------------------------------------------body--------------------*/

/*------------------------------------------------header--------------------*/
#header{
	background:url({site_url}images/template/header.gif) 0 0 no-repeat;
	width:981px;
	height:274px;
	position:relative;
	margin:0 auto;
}
#header ul.topnav{
	background:url({site_url}images/template/nav_bar.gif) 0 0 no-repeat;
	width:847px;
	height:29px;
	position:absolute;
	left:31px;
	top:6px;
	padding:0 0 0 72px;
}
#header ul.topnav li{
	background:url({site_url}images/template/nav_div.gif) right top no-repeat;
	height:27px;
	float:left;
	padding:0 1px 0 0;
}
#header ul.topnav li a{
	display:block;
	background:url({site_url}images/template/nav_bg.gif) 0 0 repeat-x;
	padding:0 14px;
	font:bold 11px/27px Arial, Helvetica, sans-serif;
	color:#344A04;
	background-color:inherit;
	text-decoration:none;
}
#header ul.topnav li a:hover{
	background:url({site_url}images/template/nav_hover.gif) 0 0 repeat-x;
	color:#fff;
	background-color:inherit;
}
#header ul.topnav li a.hover{
	display:block;
	background:url({site_url}images/template/nav_hover.gif) 0 0 repeat-x;
	color:#fff;
	padding:0 14px;
	font:bold 11px/27px Arial, Helvetica, sans-serif;
	background-color:inherit;
	text-decoration:none;
	cursor:text;
}
#header ul.topnav li.last{
	background-image:none;
	height:27px;
	float:left;
}
#header img.logo{
	position:absolute;
	left:40px;
	top:70px;
	width:249px;
	height:95px;
}
#header h1{
	background:url({site_url}images/template/slogan.gif) 0 0 no-repeat;
	width:484px;
	height:32px;
	position:absolute;
	left:411px;
	top:108px;
	text-indent:-10000px;
}
#header p{
	font:normal 12px/19px Arial, Helvetica, sans-serif;
	color:#fff;
	background-color:inherit;
	position:absolute;
	left:411px;
	top:142px;
}
#header p span.txt1{
	color:#fff;
	font-weight:bold;
	background-color:#1E6887;
}
#header img.icon{
	position:absolute;
	left:60px;
	top:185px;
	width:150px;
	height:80px;
}
#header h2{
	font:bold 15px/20px Arial, Helvetica, sans-serif;
	color:#E8E8E8;
	background-color:inherit;
	position:absolute;
	left:40px;
	top:185px;
}
#header p.announcement{
	font:normal 18px/23px Arial, Helvetica, sans-serif;
	color:#E8E8E8;
	background-color:inherit;
	position:absolute;
	left:70px;
	top:207px;
	width:790px;
}
#header p.announcement span.smallTxt{
	font:normal 12px/18px Arial, Helvetica, sans-serif;
	color:#FF9C3A;
	background-color:inherit;
	padding:0 0 0 2px;
}
#header a.readMore{
	display:block;
	background:url({site_url}images/template/read_more.gif) 0 0 no-repeat;
	width:50px;
	height:38px;
	position:absolute;
	left:895px;
	top:203px;
}
#header a.readMore:hover{
	background:url({site_url}images/template/read_more_hover.gif) 0 0 no-repeat;
}
/*------------------------------------------------header--------------------*/

/*------------------------------------------------body--------------------*/
#body{
	width:978px;
	padding:13px 1px 13px 2px;
	margin:0 auto;
}
/*------------------------------------------------left--------------------*/
#left{
	width:357px;
	float:left;
}
#leftbox{
	width:324px;
	background:url({site_url}images/template/lft_box_bg.gif) 0 0 no-repeat #EAEADA;
	border:#DDDDCA solid 7px;
	margin:2px 0 4px 0;
	padding:5px 10px 6px 9px;
	color:#878767;
}
#leftbox:hover{
	border-color:#CCCCCC;
}
#leftbox img{
	display:block;
	background:transparent;
	width:88px;
	height:100px;
	margin:0 0 0 5px;
	float:left;
}
#leftbox img.link{
	position:absolute;
	z-index:2;
	background:transparent;
	width:324px;
	height:105px;
}
#leftbox p{
	float:right;
	padding:0 0 0 15px;
	border-left:#F9F9F1 solid 2px;
	font:normal 11px/16px "Trebuchet MS", Arial, Helvetica, sans-serif;
	width:210px;
}
#leftbox p span{
	font:normal 19px/17px Arial, Helvetica, sans-serif;
	color:#D76E08;
	background-color:inherit;
	margin:0 0 5px 0;
	height:20px;
	display:block;
}
#leftbox p span a{
	font:normal 19px/17px Arial, Helvetica, sans-serif;
	color:#D76E08;
	text-decoration:none;
}
/*------------------------------------------------left--------------------*/
/*------------------------------------------------left message-------------*/

#leftmsg{
	width:324px;
	background:url({site_url}images/template/lft_box_bg.gif) 0 0 no-repeat #EAEADA;
	border:#DDDDCA solid 7px;
	margin:2px 0 4px 0;
	padding:5px 10px 6px 9px;
	color:#878767;
}
#leftmsg p{
	float:right;
	padding:0 0 0 15px;
	font:normal 11px/16px "Trebuchet MS", Arial, Helvetica, sans-serif;
	width:320px;
}
#leftmsg p span{
	font:normal 19px/17px Arial, Helvetica, sans-serif;
	color:#D76E08;
	background-color:inherit;
	margin:0 0 5px 0;
	height:20px;
	display:block;
}
/*------------------------------------------------left message-------------*/
/*------------------------------------------------right--------------------*/
#right{
	width:608px;
	float:right;
	background:url({site_url}images/template/right_panel_bg.gif) 0 0 repeat-y;
}
#right p.rightTop{
	display:block;
	background:url({site_url}images/template/right_top.gif) 0 0 no-repeat;
	width:608px;
	height:26px;
}
#right h2{
	font:bold 30px/22px Arial, Helvetica, sans-serif;
	color:#222222;
	background-color:inherit;
	margin:0 0 16px 0;
	padding:0 0 0 38px;
	display:block;
}
#right p{
	font:normal 13px/18px Arial, Helvetica, sans-serif;
	color:#62625C;
	background-color:inherit;
	padding:0 27px 10px 38px;
}
#right p b{
	font:bold 13px/18px Arial, Helvetica, sans-serif;
	color:#5F860B;
	background-color:inherit;
}
#right p span{
	font:bold 17px/18px Arial, Helvetica, sans-serif;
	color:#D76E08;
	background-color:inherit;
	border-top: #BCBCB5 dashed 1px;
	border-bottom:#BCBCB5 dashed 1px;
	width:65%;
	display:block;
	padding: 4px 0;
	margin-top:10px;
}
#right img{
	display:inline-block;
	margin:0 38px 0 5px;
	border: 1px solid #666666;
	padding: 5px;
	background-color: #fff;
	float:right;
}
#right p img{
	display:inline-block;
	margin:0 0 0 5px;
	border: 1px solid #666666;
	padding: 5px;
	background-color: #fff;
	float:right;
}
#right p.rightBottom{
	display:block;
	background:url({site_url}images/template/right_bottom.gif) 0 0 no-repeat;
	width:608px;
	height:20px;
	float:left;
        margin-bottom:-10px;
}
/*------------------------------------------------right--------------------*/


/*------------------------------------------------body--------------------*/

/*------------------------------------------------bodyBottom--------------------*/
#bodyBottom{
	width:946px;
	background:url({site_url}images/template/body_bottom_bg.gif) 0 0 repeat-x #B9B99D;
	color:#fff;
	padding:22px 13px 19px 18px;
	margin:0 auto;
}
#news{
	width:580px;
	float:left;
	margin:0 28px 0 0;
}
#news img{
	float:left;
	margin:0 10px 15px 0;
}
#news h2{
	display:block;
	background:url({site_url}images/template/arrow_red.gif) 0 0 no-repeat;
	padding:0 0 0 25px;
	font:bold 22px/16px Arial, Helvetica, sans-serif;
	color:#fff;
	background-color:inherit;
	margin:0 0 17px 0;
}
#news h3{
	display:block;
	background:url({site_url}images/template/news_bar.gif) 0 0 no-repeat;
	width:570px;
	height:17px;
	padding:0 0 0 7px;
	margin:0 0 10px 0;
	font:bold 11px/17px Arial, Helvetica, sans-serif;
	color:#974D04;
	background-color:inherit;
	text-transform:uppercase;
}
#news p{
	font:normal 12px/20px Arial, Helvetica, sans-serif;
	color:#F7F7EA;
	background-color:inherit;
	padding:0 0 13px 0;
}
#news p span{
	font:bold 14px/20px Arial, Helvetica, sans-serif;
	color:#2C2C1B;
	background-color:inherit;
	display:block;
}

#member{
	width:200px;
	float:right;
	display:inline-block;
}
#member p{
	font:normal 11px/22px "Trebuchet MS", Arial, Helvetica, sans-serif;
	float:right; 
	display:block;
	font-weight:bold;
	padding: 10px 15px 0 0;
}
#member h2{
	padding:0 0 0 20px;
	font:bold 16px/31px Arial, Helvetica, sans-serif;
	color:#fff;
	background-color:inherit;
}
#member form{
	/*width:191px;
	background:url({site_url}images/template/member_form_bg.gif) 0 0 repeat-x #353535;*/
	padding:10px 15px 10px 17px;
	color:#fff;
}
#member form label{
	font:normal 11px/22px "Trebuchet MS", Arial, Helvetica, sans-serif;
	float:left; 
	display:block;
}
#member form input.txtBox{
	width:150px;
	height:19px;
	border-left:#808080 solid 1px;
	border-top:#808080 solid 1px;
	border-right:#D4D0C8 solid 1px;
	border-bottom:#D4D0C8 solid 1px;
	color:#000;
	background-color:#fff;
	margin:0;
	padding:0;
	float:left;
}
#member form a{
	background:url({site_url}images/template/register_member_icon.gif) 0 0 no-repeat;
	padding:0 0 0 20px;
	font:bold 11px/14px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color:#9CCC37;
	background-color:inherit;
	text-decoration:underline;
	float:left;
	margin:15px 0 0 0;
	width:120px;
}
#member form a:hover{
	text-decoration:none;
}
#member form input.go{
	background:url({site_url}images/template/btn_go.gif) 0 0 no-repeat;
	width:36px;
	height:15px;
	border:none;
	cursor:pointer;
	float:right;
	margin:15px 0 0 0;
}
/*------------------------------------------------bodyBottom--------------------*/

/*------------------------------------------------footer--------------------*/
#footer{
	width:977px;
	height:auto;
	margin:0 auto;
	background:url({site_url}images/template/footer_bg.gif) 0 0 repeat-x #323232;
	color:#fff;
	position:relative;
}
#footer ul{
	width:587px;
	/*position:absolute;*/
	padding: 10px 0 7px 10px;
	/*left:11px;
	top:15px;*/
}
#footer ul li{
	float:left;
	color:#D4D4C6;
	background-color:inherit;
	font:normal 11px/19px Arial, Helvetica, sans-serif;
}
#footer ul li a{
	color:#D4D4C6;
	background-color:inherit;
	font:normal 11px/19px Arial, Helvetica, sans-serif;
	padding:0 7px;
	text-decoration:none;
}
#footer ul li a:hover{
	color:#D4D4C6;
	background-color:#D76E08;
}
#footer p.copyright{
	font:normal 11px/19px Arial, Helvetica, sans-serif;
	color:#D76E08;
	background-color:inherit;
	padding: 7px 0 5px 0;
	margin: 0 0 0 19px;
	/*position:absolute;
	left:19px;
	top:54px;*/
}
#footer a.subscribe{
	background:url({site_url}images/template/subscribe_icon.gif) 0 1px no-repeat;
	font:normal 11px/12px Arial, Helvetica, sans-serif;
	color:#B9B99D;
	background-color:inherit;
	/*position:absolute;
	left:19px;
	top:38px;*/
	text-decoration:none;
	border-bottom:dotted;
	border-bottom-width:1px;
	width:50px;
	margin:50px 0 0 19px;
	padding:0 0 0 15px;
}
#footer a.subscribe:hover{
	color:#9CCC37;
	background-color:inherit;
	text-decoration:none;
	border-bottom:none;
}
#footer #member a.login{
	float:right;
	width:102px;
	height:24px;
	margin: 10px 10px 0 0;
	background:url({site_url}images/template/login.gif) 0 0 no-repeat;
}
#footer #member a.login:hover{
	background:url({site_url}images/template/login_hover.gif) 0 0 no-repeat;
}
/*------------------------------------------------footer--------------------*/

[HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
****** http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Oklahoma State Delts | Home</title>
<link rel='stylesheet' type='text/css' media='screen' href='http://okstatedelts.com/index.php?css=main/style.v.1239486184'>
<link rel='stylesheet' type='text/css' media='screen' href='http://okstatedelts.com/index.php?css=main/style_newsticker.v.1237292931'>
<link rel='stylesheet' type='text/css' media='screen' href='http://okstatedelts.com/index.php?css=main/style_events.v.1234949295'>
******** type="text/javascript" src="http://okstatedelts.com/javascripts/prototype.js"></script>

******** type="text/javascript" src="http://okstatedelts.com/javascripts/effects.js"></script>
******** type="text/javascript" src="http://okstatedelts.com/javascripts/newsticker.js"></script>
</head>

<body>
<div id="header">
<ul class="topnav">
<li><a class="hover" href="http://okstatedelts.com/index.php">Home</a></li>
<li><a href="http://okstatedelts.com/index.php/about">Who We Are</a></li>

<li><a href="#">What We Do</a></li>
<li><a href="#">Recruitment</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Alumni</a></li>
<li class="last"><a href="#">Contact Us</a></li>
</ul>

<a href="http://okstatedelts.com/index.php"><img src="http://okstatedelts.com/images/template/logo.gif" alt="Delta Tau Delta" width="249" height="95" border="0" class="logo" /></a>
<h1>Become a man of Distinction</h1>
<p>Lead a life of <span class="txt1">excellence</span> and have the experience of a lifetime.</p>
<h2>Announcements:</h2>
<div id="newsticker">
<ul>

<li>Delt Dunk Coming Soon<br /><span>Teams are forming now. Register <a href="http://deltdunk.eventbrite.com" target="new">HERE</a></span></li>
<li>Website Update In Progress<br /><span>We are currently updating our website. Please be patient with our progress.To view old website, click <a href="http://okstatedelts.com/old" >here</a></span></li>
</ul>
</div>
<a href="#" class="readMore"></a>
</div>

<div id="body">

<!

LEFT BOX

>
<div id="left">

<div id="leftbox">

<img src="http://okstatedelts.com/images/uploads/num1.gif" alt="Sign Up" />
<p><span><a href="old/rushcontact">Sign Up</a></span><p><b>There are no â€œstrings attachedâ€</b> when leting us know you have interest. Click here to submit a request and our recruitment chairman will contact you right away.
</p></p>

<br class="spacer" />
</div>

<div id="leftbox">

<img src="http://okstatedelts.com/images/uploads/num2.gif" alt="Have Fun" />
<p><span><a href="">Have Fun</a></span><p>Rushing <b>Delt is all about having fun and making friends</b>. From pool parties and socials; to lake trips and weekend events. We guarantee Delt Rush to be the greatest experience of your life.
</p></p>
<br class="spacer" />
</div>

<div id="leftbox">

<img src="http://okstatedelts.com/images/uploads/num3.gif" alt="Pledge Delt" />
<p><span><a href="">Pledge Delt</a></span><p>Once youâ€™ve learned about Delt Life and <b>built friendships with the brothers</b>, all you need to do is sign an intent to pledge form, then you may begin officially associating with the Fraternity
</p></p>
<br class="spacer" />
</div>

<br class="spacer" />
</div>

<!

RIGHT BOX

>
<div id="right">

<p class="rightTop"></p>

<h2>Welcome</h2>
<p><b>Work Hard, Play Hard</b> is the motto we live by at Delta Tau Delta. Work Hard, because we excel in leadership, academics, and service to others. Play Hard, because we recognize that there is more to life than classes and problem sets. We pride ourselves on being one of the most successful and social fraternities on campus. We are currently celebrating our 60<sup>th</sup> year on the beautiful Oklahoma State campus.</p>
<img src="http://okstatedelts.com/images/uploads/house.jpg" alt="The Delt House at Sunset" />
<p>We live in a spacious two-story standing as the focal point of University Circle; within easy walking distance of the campus. Amenities such as a 73 inch HDTV, DirecTV in all rooms, high-speed internet, laundry facilities, full parking lot, pool table, and our chef Rob make life more comfortable. <span>The Delt Shelter is the place where we have fun, study, and visit; even years after we graduate.</span></p>

<p>Our 45 brothers represent many different backgrounds, 6 states, 12 majors, ten varsity sports, and are involved in everything from our national community service, Adopt-A-School, to managing their own start-up companies.</p>

<p class="rightBottom"></p>
<br class="spacer" />
</div>

<br class="spacer" />
</div>
<div id="bodyBottom">

<div id="news">
<h2>Latest News</h2>

<h3><a href="news">Click for All News Stories</a></h3>

<img src="/images/uploads/cache/carnival-150x100.jpg" width="150" height="100" alt="Delt Homecoming Carnival Raises $10,000" />
<p><span>Delt Homecoming Carnival Raises $10,000</span>The annual homecoming carnival hosted by the Men of Delta Tau Delta raised over $10,000 towards Coaches vs. Cancer, the Delts local philanthropy, for the night. The carnival was packed from beginning to end and everyone had a great time.
<a href="http://okstatedelts.com/index.php/weblog/news/delt_homecoming_carnival_raises_10000/">more >></a></p>
<br class="spacer" />

<img src="/images/uploads/cache/grades-150x120.jpg" width="150" height="120" alt="Academics Improved Greatly" />
<p><span>Academics Improved Greatly</span>The men of Delta Tau Delta achieved a 3.1 cumulative GPA for the Fall 2008 semester, beating both the all men and all Greek average GPA. Achieving a rank of 6 among all 20 IFC fraternities. The Delta Chi chapterâ€¦ <a href="http://okstatedelts.com/index.php/weblog/news/academics_improved_greatly/">more >></a></p>

<br class="spacer" />

</div>
<div id="events">
<h2>Events List</h2>
<h3>Click for Full Event List</h3>

<div id="event">
<div class="xsnazzy">
<b class="xtop"><b class="xb1"></b><b class="xb2 color_a">
</b><b class="xb3 color_a"></b><b class="xb4 color_a"></b></b>
<div class="xboxcontent">

<h1 class="month color_a">May</h1>
<p class="date">2</p>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b>
<b class="xb2"></b><b class="xb1"></b></b>
</div>
<p class="details"><span>Founderâ€™s Day</span><br /><b>Time: </b>10:00am - 6:00pm<br /><b>Location: </b>Delt House</p>

</div>

</div>

<br class="spacer" />
</div>

<div id="footer">
<div id="member">

</div>
<ul>

<li><a href="http://okstatedelts.com/index.php">Home</a>|</li>
<li><a href="http://okstatedelts.com/index.php/about">About Us</a>|</li>
<li><a href="http://okstatedelts.com/index.php/contact">Contact Us</a></li>
</ul>
<p class="copyright"><br />©2009 Delta Tau Delta</p>
<br class="spacer" />

</div>
******** type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
******** type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-4083904-2");
pageTracker._trackPageview();
} catch(err) {}</script>

</body>
</html>
[/HTML]

Linc · April 2009

It's probably the scrollbar appearing and disappearing. Firefox changes its canvas size depending on whether it is present.

Thrax · April 2009

That's exactly what it is.

Template shifts if it's not over certain length

Comments