Footer overlapping in IE7

HTML & CSS
1

I have this problem only in IE7 where my footer is overlapping the content div.

here is the link http://www.helicopternewyorkcity.com/tour

here is the css

.container
{
	margin:0 auto;
	width:980px;
}
.content
{
	width:100%;
}

.footer_bg
{
	background-image:url("/i/1748/footer.gif");
	background-repeat:no-repeat;
	width:980px;
	height:151px;
        margin-top: 20px;

}

the html is something like this

<div class="container">
   <div class="content">content</div>
   <div class="footer">footer</div>
</div>

hope someone can help.

Cheers

2

Hmm, divs within divs within divs… makes it hard to debug.

Anyhow, perhaps try this (it’s just a guess):

#footerContainer {clear: both;}

One other thing I notice, that may be useful here and/or for future reference:

Instead of using a div like .spacer, do something like

#content {margin-bottom: 36px;}
3

You’d be better off to remove the bottom padding on the Content section and remove the margins on the #footerContainer. Without them, those elements will just stack naturally in all browsers.

4

I have done that still doesn’t work

5

Hi,

the problem is that you have set te height of some of your elements to 1px high which means that any overflow ill be ignored.


.rezgo_clm_487px_btm {
    background: none!important;
    text-align:center;
    width:607px !important;
[B]    /*height:1px !important*/[/B]
}
.right_inner_content h5 {
    float:left;
    width:270px;
    margin-top:10px;
    background-color:#b8b8b8;
[B]    /*height:1px;*/[/B]
    font-size:1px;
}

If that was a hack for ie6 then there’s no need because the element already has a layout and the 1px should be removed.