One of my sites is porting over a three-image background, where the top image is the border at the top of content, the middle image is the body of the content (repeated Y), and the bottom image is the bottom border of the content.

I've created a functional version of this by inserting the top image above the loop, putting the middle image as the content background, and the bottom image at the end of the loop.

However, this creates a problem when the post content is shorter than the sidebar. The background will extend to the height of the sidebar but the bottom image border is hovering at the end of the post content.

I've tinkered with putting the bottom image at the top of the footer. However, I can't get rid of the padding between the footer and content. I've double-checked padding on Center Column, Layout, and Post Content, along with the Footer and it's all at 0px. I've also tried forcing the footer up 20px by using negative margin and it won't move past that invisible border.

The site in question is www.davisfarmtoschool.org/index.php (don't go to the root directory, the index.html site is still active).

I'm sure I'm missing one setting and I'll feel dumb when this is solved. Seems pretty simple.

My Layout Container style is blank and my Center Column style only has the background image in it. Thoughts?

Try the following but see if it works in all browsers.

td#footer img {
 margin-top: -10px !important;
}

It works! Of course, IE screws up the top image now, so I'll have to tinker with that to create a friendly solution. But this should give me some ammo for the battle. Thanks!