View Full Version : CSS Footer Help

09-29-2007, 05:52 AM
I have a website http://www.foodprotect.org/CFP.php that I'm trying to get a footer to work properly. Currently I have a graphic that "closes" the square around the middle body of text that has "C Conference for Food Protection" at the bottom. But as you can see on the website, after this bottom part closes the square, the side bars continue on after it.

Can somebody help with this?


09-29-2007, 06:00 AM
not 100% sure but what if you delete this way at the bottom

<!--<div class="box3text"><span class="styleboxheader">Upcoming Events</span><br/>
<span class="styleboxcontent">Details of Meetings, Conference Calls, Committee Report Due Dates, etc.<br/><br/>

<a class="box1text" href="test.html">More</a> >></span>
</div> -->

<!--<div class="contentareabox1">The 2008 Conference for Food Protection Biennial Meeting will be held at The Omni San Antonio Colonnade,</div>
<div class="contentareabox2">This is headline #2...</div>
<div class="contentareabox3">This is headline #3...</div>-->

at first i thought it was your menu on the right. but this one has "test.html" as the link for "more" while the correct "more" link has "upcoming events.html" which is located WAY up there in the html.

and since these have comment tags, idk. could be worth just getting rid of. especially since they follow right after the problem area.

try it out.

09-29-2007, 06:34 AM
I took that part out, but it didn't seem to help.

The site looks really messy, code wise, because I originally put it all together, but then installed a web wysiwyg editor on it, and the person that has made updates using it, has totally messed up all of the code. The program is webedit. Does anybody use it, or have an alternative? It just makes the coding so crazy.

But, back to my original issue, no idea why my footer won't close the square. On all of the other pages, it looks fine?

09-29-2007, 06:41 AM
First of all add a proper DOCTYPE to you page, see http://www.codingforums.com/showthread.php?t=18346 to get more about this.
After all validate your page using w3-validator (http://validator.w3.org/).

09-30-2007, 04:22 AM
adburaooft has a good point. think of the w3c as the poeple you go to to make sure your code is correct. i love that place. :p

but i did some extra poking around again myself and found out you actually have two body tags! your only supposed to have 1 of those.

also. at the bottom, you have the following

<img src="/images/contentfooter.gif"/>


</body><div id="footer">


the footer.gif is supposedly the one doing its job appearing at the bottom and that should be it. so when i saw that (aside from double bodys) you also have a new div starting with the name "footer" i checked out your css to see what it would have and it had this

background: url(../images/contentfooter2.gif)

height: 50px;


my guess is, the <div id="footer"> is the real problem because the name of the footer that is actually showing up on the page is just "contentfooter.gif" and NOT "contentfooter2.gif". so that div is basically not even working right.

try removing that div.


09-30-2007, 10:06 AM
Are you trying to get a preview which looks like when you change your

<div style="top: 202px; height: 1251px; left: 175px; width: 552px;" class="contentbg">

<div style="top: 202px; height: auto; left: 175px; width: 552px;" class="contentbg">?

09-30-2007, 10:17 PM
Thanks for everybody's help! I changed one thing like abduraooft suggested height: 1251px to height: auto, and it looks perfect!

One other issue, if anybody has time, is with this specific page:


Question #1: the table won't stay within the border.
and Question #2: why is the text shoved to the left in the green table?

I've redone this page over and over again, and it's driving me crazy. No clue why this is happening.

10-01-2007, 06:40 AM
#1) In the CSS for the first table change

element.style {
(Change the same for the second table where you have used a fixed pixel width)


I think you can replace those tables with div s, which will help you much in positioning and layout.

10-01-2007, 10:23 PM
So I created a div for tablegreen, and a soon as I made the list a bulleted list, it moved everything over to the left again. Any ideas?

10-02-2007, 10:51 AM
check your (missing) Doctype...

10-02-2007, 08:58 PM
I think this is what you are trying to get at...

div.tablegreen {
text-align: center;

.tablegreen ul {
width: 400px;

10-02-2007, 10:15 PM
I've checked your website with a validator and there are many errors there.
It would be wise to try and fix them.
You discard a few unexpected SCRIPT tags and you don't have any doctype.

10-02-2007, 11:24 PM
I've checked your website with a validator and there are many errors there.
It would be wise to try and fix them.
You discard a few unexpected SCRIPT tags and you don't have any doctype.

Apparently you have also mis-spelt the word 'align'; you have put 'algin' in your css.

You really should put a Doctype and validate.