IE7 issue - spacing too large on floated, padded elements

Having IE7 only issues with spacing on this page: http://chantalorganics.co.nz/wordpress/newsletter/

The image below shows the large space above and below the feature boxes, and above the footer content.

I can see that many people have issues with margins in IE7, but I am using padding. I am also using Eric Meyer's reset.css. However, the content is floated which seems part of the problem.

Appreciate any guidance!

Answers


I found that this big blank space is because of margin-bottom added to 'entry-content' class. This class is added to div right under H1. You can remove that margin-bottom and add it to H3 with 'Find out why' text. In my case that solved problem :)

Btw. on Chrome when You hover on Tahini Cookies image the image move's down. That is weird...

EDIT: To repair footer blank space add in styles display inline-block like below

#footer-container { 
    display: inline-block;
}

Big blank space above footer is because You have height added to #primary-menu and #container. I tried to remove that but then I noticed that after that menu is not height enough so I modified both heights to min-height: 563px (number is up to You). Is that what You are expecting? I found help at http://www.cssnewbie.com/double-margin-float-bug/

And today I don't have that wierd jumping Tahini Cookies image. Can You tell me what was that and how did You repaire this?


Need Your Help

Using regex to reformat text

ruby regex

Is there a way to use regex to reformat a string?

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.