IE footer problem

Hello I quite new to sitepoint and so I am sorry if this question/issue has already been put into a thread. I am designing a website for a company, and have spent the entire previous weekend trying to solve this problem.

It appears that there is no clearing of the footer in ie. The footer has risen up to just under a flash element and is overlapping the content of the website. Looks good in firefox, opera, and safari. I am fairly new to web design and development, so it could be an easy css fix. It might not be a clearing problem either, and I have no clue how to go about fixing it.
IE is driving me nuts.

Here is the site:

McCormick Farms - Farming in Western New York Since 1945

Can’t tell you how to fix it, but FWIW, the problem is showing up only in IE7. It’s OK in IE8 and IE9. In IE6, the footer has some formatting issues, but its position is OK.

Ok, thanks for the information. I will look into ie6 now too. :slight_smile:

While your at ChrisElfLord’ problem. I also have a hard time removing the line in the footer. There is a thin black line on the footer.
You can see the website here:

Call Center Philippines

I tried to trace it on the footer.php or CSS file but I cant seem to find it. It says on the source code div id=“BJ_Footer”.

Anyone can help me on this?

I hope you can fix your footer on I.E. ChrisElfLord.

:slight_smile:

In layout.css you have 2 rules and both set a border top on #BJ_Footer.


#BJ_Footer {
    [B]border-top:1px solid #1E1E1E;[/B]
    padding: 10px 0 0;


}


#BJ_Footer {

   [B]border-top: 1px solid #1E1E1E;[/B]


}



Remove those and the border will disappear.

Please note that in future you should start your own topic and not tack on to someone else’s thread unless you are having the exact same problem :). You will get better responses in your own thread that way anyway.

I think,
Problem is in your css code “you should not apply padding in that div where you already apply width because when you fix width of a div and then apply padding the width of div increase”

HI,

The problem in IE7 is that you have give #main at height of zero and therefore any content must be displayed in zero height which is why you can’t see it. The fact that other browsers have left it overflow and take part in the flow is actually more of a bug than ie7’s behaviour.

Remove the height but add haslayout as follows:


#main #content {
 [B]   /*height: 0px;*/[/B]
    width: auto;
    margin: 0px;
    padding: 0px;
    background-image: url(http://www.mccormickfarms.com/images/_r1g_c1a.jpg);
    background-position: bottom;
}
[B]#content{zoom:1.0}[/B]

The problem with the footer in IE6 is the double margin float bug and can be fixed like this:


#main #footer #videofooter {
    height: 164px;
    width: 260px;
    margin-left: 36px;
    float: left;
 [B]   display:inline;[/B]
}


Worked like a charm. Sorry for my css ignorance, I will keep in mind that next time I need to check the css for the content/ other areas and not just the footer. You saved me tons of time. Can’t believe I missed that… I was definitely looking for the wrong thing. Thanks! :smiley: