horizontal gaps between divs in IE8

Permalink
I've built this site (http://www.wallbrink.com.au/concrete5/) which looks fine in the latest versions of Firefox, Chrome and Safari, but in IE8 on XP there are horizontal gaps between the divs near the left bottom of the page, and the drop-down menu doesn't work properly.

Someone suggested adding a strict doctype 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
which I have done at the top of the page template, but it doesn't appear to have fixed the issue.
Also, I added 
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible" />
in the footer (so it comes in the header after the <title> tag, which is supposed to prevent IE going into quirks mode, but no joy with that either.

Does anyone have any idea what might be causing it?

Richard

Tags:

View Replies:
KateD replied on at Permalink Reply
KateD
I started having a lot fewer of these kinds of problems (with discrepancies between how IE and other browsers render my pages) since I started using a set of "CSS reset" rules in my CSS. It helps to get all the browsers using the same defaults for margins, padding, etc.

Here's where I get mine:http://meyerweb.com/eric/tools/css/reset/ Note that you may need to tweak the properties to suit your purpose, but this has been a real life saver for me.
stretchrt replied on at Permalink Reply
Actually I did wonder about those - I hadn't ever seen them before, but bumped into these today:http://developer.yahoo.com/yui/reset/...

I'll give that a go tomorrow and see how it turns out. Thanks.
nerdess replied on at Permalink Reply
nerdess
to me this is a pure CSS issue........

what you need to do is remove

#page #central {
min-height: 600px
}

and also remove

#page no-sidebar#central,
#page .central-right#central {
min-height: 599px
}

your html and your css are a bit messy ;-)

hope this helps!
stretchrt replied on at Permalink Reply
Thanks Nerdess,

Yes I know my css is messy - going to clean it up as soon as I get a chance.

BTW horizontal gap issue is resolved - just applied a height rule to a div which IE wasn't interpreting the same. So now it's just the menu to go. Will revisit it when I have cleaned up the CSS.