tags:

views:

51

answers:

1

Ok, this is not really a question, more a solution to a question I was about to ask...

What I was trying to do was simply center a div using CSS. and I couldn't get my head around it. It simply didn't work. I used the following code:

<style type="text/css">
<!--
div.test {
    width: 300px;
    margin-right: auto;
    margin-left: auto;
    border: 1px solid black;
}

-->
</style>
<div class='test'>
hello
</div>

This didn't work on IE, it did on anything else (including my iPhone, which made it very frustrating). The div simply stayed aligned on the right.

Now for the (simple!) solution, which cost me a lot of time, and which I couldn't locate searching for the problem in google. Simly add the doctype, et voilas!:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"&gt;

That fixed it. Cost me a couple of very frustrating hours. Hopes this can help some of you out there. I searched on stackoverflow as well and found some dirty solutions to this.

+4  A: 

Yes, if you omit the <!DOCTYPE> declaration you get the dreaded Quirks Mode, where IE tries to behave as much as possible like IE5, for compatibility reasons.

Not supporting margin-left/right: auto is one of the more prominent IE5 CSS bugs, but by no means the only one or even the worst. Quirks Mode CSS rendering is an enormous headache you should avoid at all costs. Always include a <!DOCTYPE> in every HTML document.

bobince
No <!doctype> declaration means a lot of bugs, bugs, bugs and introducing a lot of compatibility issues between browsers, like for example [the box model](http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug) problem. Even with a doctype, there are enough differences to break your brains with...
Justus Romijn