Weird IE7 Bug/Error

Question

Hi all,

I'm having some problems with a certain piece of code which sits in my site; this error only occurs in Internet Explorer 7.

Rather than post all my HTML/CSS markup here I have put up a version of the site here.

As you can see I have "Widgets" in columns, for some reason IE7 adds an extra space under the Widget Header while FF displays it fine without any space.

This error does not occur in IE8, FF3, Opera, Safari or Chrome.

Can anyone suggest why this occurring and if possible, a fix?

Thanks in advance!

Answer 1

Unfortunately IE 7 doesn't run very well on Ubuntu so I'm unable to reproduce your error, but have you tried resetting your CSS with a stylesheet like Reset CSS?

There is also a great site about browser quirks that you might want to have a look at.

Answer 2

Did you start by zero'ing out all of your element by doing a CSS reset? I see you have a few different elements in your div, it's possible that one of these has a default marin in IE7 that is throwing everything out of wack...

Answer 3

Add this css to wgt-wrap and it should behave.

zoom: 1

Google for hasLayout for explanation.

[EDIT] This discussion provides more insight into this IE bug. http://stackoverflow.com/questions/1162625/why-does-internet-explorer-need-the-haslayout-flag