1
Hi
I've got a problem with excess space under my footer.
I want the page to finish at the bottom of my footer, but the background image of the body tag carries on until it reaches the bottom of the browser window.
Any ideas?
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="positive_web_design.css" rel="stylesheet" type="text/css" />
<script type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
nbArr[nbArr.length] = img;
for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = args[i+1];
nbArr[nbArr.length] = img;
} }
} else if (event == "over") {
document.MM_nbOver = nbArr = new Array();
for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
nbArr[nbArr.length] = img;
}
} else if (event == "out" ) {
for (i=0; i < document.MM_nbOver.length; i++) {
img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
nbArr = document[grpName];
if (nbArr)
for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
document[grpName] = nbArr = new Array();
for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
if (!img.MM_up) img.MM_up = img.src;
img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
nbArr[nbArr.length] = img;
} }
}
//-->
</script>
<style type="text/css">
<!--
.style4 {color: #666666}
-->
</style>
</head>
<body onload="MM_preloadImages('images/home_down.gif','images/home_over.gif','images/contact_down.gif','images/contact_over.gif','images/portfolio_down.gif','images/portfolio_over.gif','images/prices_down.gif','images/prices_over.gif')">
<div id="wrapper">
<div id="header"><img src="images/masthead.jpg" alt="masthead" width="752" height="180" /></div>
<div id="navigation"><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','home','images/home_down.gif',1)" onmouseover="MM_nbGroup('over','home','images/home_over.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="images/home.gif" alt="home" name="home" width="100" height="24" border="0" id="home" onload="" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','contact','ima ges/contact_down.gif',1)" onmouseover="MM_nbGroup('over','contact','images/contact_over.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="images/contact.gif" alt="" name="contact" width="100" height="24" border="0" id="contact" onload="" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','portfolio','i mages/portfolio_down.gif',1)" onmouseover="MM_nbGroup('over','portfolio','images/portfolio_over.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="images/portfolio.gif" alt="" name="portfolio" width="100" height="24" border="0" id="portfolio" onload="" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','prices','imag es/prices_down.gif',1)" onmouseover="MM_nbGroup('over','prices','images/prices_over.gif','',1)" onmouseout="MM_nbGroup('out')"><img src="images/prices.gif" alt="" name="prices" width="100" height="24" border="0" id="prices" onload="" /></a><img src="images/nav_06.gif" alt="nav bar" width="352" height="24" /></div>
<div id="content">
<div id="box1">
<div class="columnwrapper">
<p><img src="images/welcome.jpg" alt="welcome" width="458" height="56" /></p>
<br />
<h1 class="main_copy">Hello and welcome to the Positive Web Design website.</h1>
<p class="main_copy">Positive Web Design is a web design company dedicated to offering professional websites at an affordable price.<br />
Whether you’re a business or an individual we can supply you with a great looking, functional website at a price that’s right.</p>
<p class="main_copy">The internet is such a major part of business this day and age, can you really afford not to have a website? Whether it’s a simple one page site with a bit about your business and your contact details or a full blown online store, your business could really benefit from an online presence, making your information available all around the world at the click of a button.</p>
<p class="main_copy">We're based in Ellesmere Port, Cheshire and we can offer friendly advice and guidance to help you plan a website that will increase your business and be an asset to your company.</p>
<p class="main_copy">If you’d like to discuss your requirements or just have a chat to find out a little more. Please do get in touch… We’d love to hear from you!<br />
</p>
<img src="images/banner-1.gif" alt="contact us" width="458" height="70" /></div>
</div>
<div id="box2">
<p><img src="images/latest_news.gif" alt="latest news" width="160" height="55" /></p>
<p class="news_copy"><strong>10-10-06</strong></p>
<p class="news_copy">Mackinnon announced he was gay! It came as no shock as his brothers a raging homo. </p>
<p class="news_copy"><strong>29-08-6<br />
</strong><br />
Jann Cousins flashed in the Swan public house. Again no big surprise there, Del when he's older certainly enjoyed it. </p>
<p class="news_copy"><strong>08-07-06<br />
<br />
</strong>piss cock wank fuck twat willy bum boobs, willies again an stuff. </p>
<p class="news_copy"><strong>22-06-06<br />
<br />
</strong>Pebbles the cat has sat in all day today an done bugger al, she's definitely got the right idea. </p>
</div>
<p> </p>
</div>
<div id="footer">
<div align="right">© Copyright 2006 <span class="pwd">Positive Web Design</span></div>
</div>
</div>
</body>
</html>
/* CSS Document */
body {
text-align : center;
min-width : 770px;
margin-top: 0px;
margin-bottom: 0px;
background-image: url(images/positive_background.gif);
background-position: 50%;
}
#wrapper {
width: 752px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
text-align: left;
margin-top: 0px;
overflow: hidden;
}
#content {
background-color: #c1c1c0;
width: 752px;
background-repeat: repeat;
overflow: visible;
height: 535px;
}
#footer {
background-image: url(images/footer_08.gif);
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
padding: 5px 20px 5px 5px;
width: 727px;
clear: left;
background-repeat: no-repeat;
height: 24px;
margin-bottom: 0px;
position: fixed;
}
.pwd {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
color: #fc7101;
}
#box1 {
width: 504px;
float: left;
background-image: url(images/box1_09.gif);
margin-left: 15px;
background-repeat: no-repeat;
background-position: bottom;
margin-top: 5px;
height: 535px;
overflow: hidden;
}
#box2 {
width: 203px;
float: left;
background-image: url(images/box2_11.gif);
background-repeat: no-repeat;
margin-top: 5px;
margin-left: 15px;
background-position: bottom;
height: 535px;
overflow: hidden;
}
#box1 img {
margin-top: 20px;
padding-left: 2px;
padding-right: 0px;
}
#box2 img {
padding-top: 20px;
padding-left: 20px;
padding-right: 30px;
}
.main_copy {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.7em;
color: #000000;
}
.columnwrapper {
padding-right: 20px;
padding-left: 20px;
}
.news_copy {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #666666;
padding-left: 20px;
padding-right: 20px;
}
