IE9 CSS compatibility and DOCTYPE statement

Question

I got this page that works OK in Chrome, and it doesn't in IE9.

I tried making a new css for the IE9 page, using a conditional comment in the html code. That's okay.

But then I tried including a doctype statement... and the following happens:

• when I include the doctype in the html file, everything is messed up (even in Chrome) but once I deleted it, the page looks great in Chrome and IE9.
• If I restart IE9 (or remove temporary data) the page doesn't work again.

I don't really know what's happening.

Any help would be really appreciated.

Answer 1

As has already been said, always use a doctype. Without one, IE renders in quirks mode, and what you get will be very different from what you get in other browsers.

If you code looks bad with a doctype, then I would suggest your code is bad to begin with. You've designed your site to quirksmode, which is going to give you results that seem random (they're not, but it will seem that way).

You're going to have to redesign your site to use standards mode. Then it will look the same (or similar) in all modern browsers.

Answer 2

First of all, it's hard to find a solution without seeing your HTML/CSS. Generally, you shouldn't need a separate CSS file for IE...

Also I suggest you try using the HTML5 Boilerplate to help minimise browser inconsistencies. This should solve most problems unless it's an error in your CSS.

Answer 3

First, you should always include a doctype. It tells the browser what set of rules you're going to be playing by.

If you omit a doctype, IE will assume your markup is ancient, and trigger Quirks Mode, which is essentially the rendering of IE 5.5. Side effects of this include the IE box model bug.

Without seeing any markup, I strongly recommend validating your markup and CSS using the W3C validators. Often times, Chrome and FireFox are "better" at guessing the meaning of questionable markup, IE not so much.