CODEWITHSUNDEEP
htmlcssinternet-explorerinternet-explorer-8internet-explorer-9
Keenan Payne
Keenan Payne

Reputation: 816

IE9 Weird Heights - Cannot Fix

Okay, so I am working on a website for a client: http://sap-bmc.dreamhosters.com/, and it is working perfectly in all browsers, except for IE9 and IE8 (IE7 seems to be working for some odd reason).

The problem I'm running into is this huge space on the three columns on the homepage:

IE9 height issue

For some reason, this extra height is being added. I have tried the following:

.grid3column { height: 300px!important; }

But it just won't work. Does anyone have any idea why this might be happening? I've been debugging for hours and can simply not figure out what the problem is.

Upvotes: 0

Views: 71

Answers (1)

Spudley
Spudley

Reputation: 168685

Your problem is that the page is being displayed by IE in Quirks mode.

The reason for this is that IE is ignoring the <!DOCTYPE> that you've specified.

And the reason for that is because you have some stray HTML code in front of the doctype. This stray code is invalid where it is in any case, because it is body content outside of the <body> tag, but in addition to that, it also has a specific problem in IE in that it breaks IE's recognition of the doctype.

The doctype must be the very first thing in the page in order for IE to recognise it.

If IE doesn't recognise the doctype, it will drop into Quirks mode. This will break a whole load of your CSS code. And that is the root cause of your problem.

[EDIT]

Okay, so the doctype issue is fixed, but there are still HTML errors, including some mis-matched tags.... which just happen to be in the tags at the bottom of your blue columns.

I suggest running your site through the W3C validator, which will show you the problem. Fix the errors that the validator tells you about, and you'll fix the problem.

Upvotes: 1

Related Questions