Css Footer Problem

Can someone help me with a IE/Firefox footer problem.

The footer is great in Internet Explorer. However in firefox it is always in the same place regardless of the length of the content and it actually cuts through my content. Basically I was just trying to float it after the content.


I would greatly appreciate any help on this issue. It is driving me crazy.

Here's the url for the site.

http://www.hodgedup.com/


Here is the css. I'll post it all if needed.

.center {margin-left: 160px;
margin-right: 160px;
height:100%;
}

.left {
float:left;
width: 160px;
margin-top: 15px;
height:100%;}

.right {
float:right;
width: 160px;
margin-top:15px;
text-align: center;
height:100%;}



.footer {
float:left;
width:100%;
height:50px;
background: #000;
color: #fff;
margin: 6px 0 0 0;
padding: 0;
}

 

There seems to be something amiss in your html Hodge. I can get the css to display correctly in Firefox but when I apply the page html it goes awry. Probably a <div> being applied that is pulling it up the page.

 

Hmm I went through all the divs. I wonder what's happening. This is the first site I've really done. I only did part of the css layout. Kalina made it pretty, but it was messed up before she came along.

So you think there is another div that is overridding that one?

 

It seems to be. I've fiddled about with the css trying to get it to display as intended and couldn't get anywhere. Then it dawned on me to try loading just the css into FF and it displayed exactly as it was supposed to but when I loaded both the css and the html, it went askew. So I'm guessing that there is another <div> the .footer is contained within that is pulling it up the page. I don't think it's a missing tag.

 

kakakoko

 

What's problem, I haven't got enough post to go this forum : (

 

I have no idea what you are trying to say hijack Barbie.

You're fun.

 

It seems to be. I've fiddled about with the css trying to get it to display as intended and couldn't get anywhere. Then it dawned on me to try loading just the css into FF and it displayed exactly as it was supposed to but when I loaded both the css and the html, it went askew. So I'm guessing that there is another <div> the .footer is contained within that is pulling it up the page. I don't think it's a missing tag.

That's fine :")

 

Bibofa do you want to be my best friend?

 

Hodgedup

The height='100%' on the .center <div> is causing Firefox to display the footer where it is. Removing the height attribute will correctly position the footer but you'll also need to adjust the margins on the <h6> in your footer <div> to make it fit within your 50px height.

Mick

 

I want to thank you both mcfox and Arnica.

 

You're welcome.

 

The site looks perfect in firefox now but there is a huge gap between the content and the header on IE.

Does anyone know why that is?

 

Yeah, that's what I was trying to say yesterday. It's an easy fix.

Your tables are currently set at 'width=100%' which is preventing them from sliding past the navigation menu. You need to adjust the table values so they are a little smaller. '99%' works but you should be aware that with this value, if anyone views your site without having the browser window full screen, the table will drop down to where you see it now.

So you need to choose a % value to allow the tables to display 'best fit' so to speak.

 

Got it all fixed now.

Thanks again.