Background size [Archive] - CodingForums.com

Pirate Mike

11-11-2008, 05:50 PM

Hi all,
I have a problem with the purple on the background of my page. It continues down below the footer and nothing i do changes it. I want it to end at the same time as the footer...

Here is a link to the test site: test site (http://www.phoenixarcheresu.co.uk/pa_new/index.asp)

The CSS is:html {height:100%;}
#background {
background:url(background.png);
background-repeat:repeat-x;
background-repeat:repeat-y;
height: 100%;
}

body {
margin:0;
padding:;
height:100%;
background-color:#ffffff;
font-family:arial, serif;
}
#header {
background: url(banner.png);
border-color: #000000;
border-width: thin;
border-style: solid;
height:150px;
margin-top: 0px;
margin-bottom: 3px;
margin-right: 3px;
margin-left:3px;
}
#wrap {
background: #990066;
min-height:100%;
width:956px;
margin:auto;
padding-top: 3px;
position:relative;
}
* html #wrap {height:100%}
#inner-wrap {
padding-bottom:80px;
}
#inner-wrap:after {
content:" ";
display:block;
clear:both;
}
#footer {
position:absolute;
bottom:12px;
height:30px;
background-color: #333333;
width:100%;
color:#FF00FF;
text-align:center;
margin:0;
padding:0;

}
#left {
float:left;
width:200px;
text-align:center;
border-color: #000000;
border-style:solid;
border-width: thin;
margin: 3px;
height: 100%;
}
#main {
position:relative;
margin-left:150px;
}

#right {
float:right;
width:200px;
border-color:#000000;
border-width:thin;
border-style:solid;
margin: 3px;
background: #A4A4A4;
text-align:left;
}
#content {
padding:5px;
text-align:left;
background: #a4a4a4;
border-color: #000000;
border-width: thin;
border-style: solid;
margin: 3px;
width: 520px;
float: right;
}
ul.none {
list-style-type:none;
margin:0;
padding: 3px;

}
li.indent{
text-indent: 10px;
}
li.head{
font-size:18px;
}
h1.right {
font-size:31px;
}

The html is: <!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=utf-8" />
<title>Untitled Document</title>
<link href="content.css" rel="stylesheet" type="text/css" />
<link href="menu.css" rel="stylesheet" type="text/css" />

</head>
<div id="background">
<div id="wrap">
<div id="header">Header</div>
<div id="inner-wrap">
<div id="left">
<ul class="menu">
<li><a href="index.asp" class="active"><span>Home</span></a></li>
<li><a href="#"><span>About Us</span></a></li>
<li><a href="#"><span>Who's Who</span></a></li>
<li><a href="#"><span>News</span></a></li>
<li><a href="#"><span>Program</span></a></li>
<li><a href="#"><span>Information</span></a></li>
<li><a href="#"><span>Parents</span></a></li>
<li><a href="#"><span>Gallery</span></a></li>
<li><a href="#"><span>Forum</span></a></li>
<li><a href="#"><span>Links</span></a></li>
<li><a href="#"><span>Contact Us</span></a></li>
</ul>

</div>

<div id="main">
<div id="right">
<ul class="none">
<h1 class="right"><b> Coming Up</b></h1>
<li class="head"><b>Normal Meeting</b></li>
<li class="indent"><b>When</b> Tuesday 11th November</li>
<li class="indent"><b>Where</b> Highworth Scout Hut</li>
<br />
<li class="head"><b>Normal Meeting</b></li>
<li class="indent"><b>When</b> Tuesday 11th November</li>
<li class="indent"><b>Where</b> Highworth Scout Hut</li>
<br />
<li class="head"><b>Normal Meeting</b></li>
<li class="indent"><b>When</b> Tuesday 11th November</li>
<li class="indent"><b>Where</b> Highworth Scout Hut</li>
<br />
<li class="head"><b>Normal Meeting</b></li>
<li class="indent"><b>When</b> Tuesday 11th November</li>
<li class="indent"><b>Where</b> Highworth Scout Hut</li>
</ul>
</div>
<div id="content">Main Content</div>
</div>
</div>
<div id="footer">Footer</div>
</div>
</html>

Any ideas??

Thanks,
Mike

itsallkizza

11-11-2008, 06:29 PM

(Skip to the red text if you just want the solution.)

First a few comments:
- You'll want to avoid using html and * selectors. It's bad form and never necessary (most of the time when you want to refer to html, body will do fine).
- Your #background is really unnecessary, in fact it limits your background image from repeating all the way down the page. Add this to your body instead: background: #ffffff url(background.png);. It will repeat x and y by default.
- Be aware that the content property and :after pseudo selector are not yet cross-browser. If what you want to add is purely graphical (like bullets, carots, spaces, etc) then go ahead and use Javascript to add that in, instead of CSS (google "getElementsByClassName" and "javascript element.innerHTML").

To answer your footer question:
- Get rid of your #footer's absolute positioning and add clear:both;.
- Get rid of your #wrap's min-height:100%; and your #inner-wrap's height:100%;.

That will make your container shrink to fit snugly below your footer.

If you desperately want your footer to always be located at the bottom of the screen then you can simply change your #footer's bottom:12px; to bottom:0px;.