IE7切断图像

Question

Hi all I have 3 divs with rollover images inside them stacked vertically inside my main content div. IE7 is chopping off about three quarters of the bottom div and I can't figure out why. It displays perfectly in all other browsers (even IE6) but IE7 just won't display properly. This is my first website so I still have a lot to learn. I've managed to fix the other IE bugs but just can't figure this one out. Any help appreciated!

.main_content {
    float: left;
    width: 816px;
    background-image: url(Images/evokedesign_bg_tile.png);
    background-repeat: repeat-y;
    overflow: hidden;
}
.portfolio_buttons {
    float: left;
    width: 634px;
}

Site link: http://evokedesignstudio.com.au/Portfolio.html

Answer 1

Now you posted a link to your live site, I found the answer very quickly:

• On .gallery , remove the height: 400px rule.
• Done.

This fixes IE7, and nothing changes in IE8/other browsers.

Answer 2

You have got your .page_container set to a fixed height of 730px .

Try updating the CSS to

.page_container {
padding: 0px;
min-height: 730px;
height:730px;
}

Same with the .gallery as @thirtydot said. Either remove the height all together or update it to min-height and height below (see above example).

By placing the height below the min-height in your stylesheet, any browser that doesn't recognise the min-height tag (IE6) will then register the height below it as a backup.