Background not repeating in footer

[drumichael87]

Hey everyone,
I'm not new to web design, but I have been working on this project for a while and my eyes are crossing! I think its a fairly simple issue...

I have a footer with a background image, and within that footer I have 3 columns, evenly distributed and floated left. I try not to do any absolute positioning when possible because I know the background won't repeat if your absolutely positioned div's expand. col1 containts text, col2 and col3 have <ul>'s that are outputted by a wp plugin. Also, I use cufon to display it in a nice font.

Since the <ul>'s will vary in length sometimes, I want the background on the #footer to repeat. The problem is that if I give the #footer a min-height, it repeats, but if the text expands past that min-height, it doesn't repeat anymore. If I remove the min-height, it shows the background real small right at the top of the div.

Here's my css:

#footer {color: #fff; width: 1020px; margin-left: auto; margin-right: auto;  background: url(images/ourbg2.png) repeat; }
#footer .strong {font-weight: bold; font-size: 14px;}
#footer a, a:hover, a:visited {color: #000608;}
#footer ul {list-style-type: none; }
#footer .col1 {float: left; padding: 10px 0 10px 10px; width: 30%; }
#footer .col2 {float: left; padding: 10px 0 10px 0; width: 34%; }
#footer .col3 {float: left; padding: 10px 0 10px 0; width: 34%; }

Here's my HTML:

<div id="footer">
	<div class="col1">
		<p>
			<span class="strong">Harvest Time Tabernacle</span<br />
			901 Wildcat Drive<br />Abbeville, LA 70510<br />
			<span class="strong">555-555-5555</span>
		</p>
	</div><!--col1-->
	
	<div class="col2">
		<p>
			<span class="strong">Our Recent Blog Posts</span>
			<?php recent_posts(); ?>
		</p>
	</div><!--col2-->
	
	<div class="col3">
		<p>
			<span class="strong">Our Most Popular Blog Posts</strong>
			<?php popular_posts(); ?>
		</p>
	</div><!--col3-->
</div><!--footer-->

If you need to see the page in action let me know, the reason I haven't posted the url here is because I have the site in "maintenance mode" and you need an admin account to view it.

Any help is GREATLY appreciated!!

-Dru

[almostbob]

from memory
only repeat-x repeat-y no-repeat are neccessary. repeat does not exist
default(blank) is repeat both : repeat keyword is for javascript
footer 100% not 1020px width, so it fills the screen at all resolutions, fixed width = horizontal scroll bars or empty space
consider font sizes in em,
px get smaller every few months as new monitors are released,
ems adjust to user preference, screen resolution, window size, device ability, user disability.
without the developer having to DO anything

[JameB]

Try this:

#footer
{
  color: #fff;
  width: 1020px;
  height: ____px;
  margin-left: auto;
  margin-right: auto;
  background-image: url(images/ourbg2.png);
  background-repeat: repeat;
}

And when all fails, try to fix all the errors you'll see when you put your CSS here: http://jigsaw.w3.org/css-validator/#validate_by_uri+with_options

Good luck!

[JJenZz]

This sounds like a clearfix issue. There are a few ways you can fix this:

#footer {
    color: #fff; 
    width: 1020px; 
    margin-left: auto; 
    margin-right: auto;  
    background: url(images/ourbg2.png); 
    overflow: hidden; /* clearfix */
}

or

#footer {
    color: #fff; 
    width: 1020px; 
    margin-left: auto; 
    margin-right: auto;  
    background: url(images/ourbg2.png); 
    display: inline-block; /* clearfix */
}

or

/* clearfix */
#footer:after { 
    content: '.'; 
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

Which one you choose is entirely dependent on which one works better for your layout. I always try the first one first but if I need something to overflow then I'll use the second one. If the second one causes any layout issues then I'll use the last one.

This 'problem' is happening because the content of the #footer is floated which causes the #footer height to collapse. If it is broken in IE then you may have to add a hasLayout fix for that. Google hasLayout.

[drumichael87]

Thank youuuuuu :)