How do I automatically center a div in IE8 in quirksmode?

Question

I am working with IE8 in quirks mode...

I have styles cascading from my Firefox stylesheet which include:

#container {position:relative; width:1007px; margin-right:auto; margin-left:auto;}       

#textbin {width:720px; position:relative; margin-right:auto; margin-left:auto;}

Apparently I'm not doing something right, or auto-margining does not work in IE8. Is this the case? If so, how can I get around this limitation? I tried no positioning, absolute positioning, and even adding relative position to my IE8 stylesheet. Furthermore, when I manually center the div, IE8 adds margin to the bottom of the page...

by the way, I am a beginner here, so if more info is needed please let me know!

Tosha

margin: auto does not work in quirks mode. – Chore

do you have to work in quirks mode? is there reason you cant set the doctype so that its not in quirks mode? – Doubletongue

Yes, I have to work in quirksmode thanks to my position:fixed header. I had to use several hacks to get the header to scroll, and the hacks wouldn't work without quirksmode. – Tosha

I'm not 100% sure what you mean w/o more details, but position:fixed works with IE 8 Standards & IE 7 Standards. See here: jsfiddle.net/rNdhV – Serieswound

Well, in short, I started out putting my header in my HTML, but a mentor told me I should use image replacement to create my header. I used fixed position on the h2 tag I replaced, and for some reason (maybe I didn't do something right) my header wouldn't work till I added this code to my stylesheet (with the help of a mentor): – Tosha

div#top {position:absolute; left: expression(document.body.scrollLeft); top: expression( ( ignoreMe = document.body.scrollTop ) + 'px' );} body > div#top {position:fixed; left: 0px; top: 0px;} body {background-image: url("images/trans.gif"); background-repeat: no-repeat; background-attachment: fixed;} – Tosha

I'm sorry I couldn't format it better... – Tosha

Answer 1

The old-school hack-y way to do it was to add text-align:center to the parent of the div you want to center. Of course you'll need to then specifically declare a text-align property for the child elements if you don't want them to be center aligned, as text-align is going to be inherited by child elements.

Serieswound

Answer 2

This will work for IE5 quirks and higher.

The css:

body, html {
width:100%;
}

#yourdivname {
margin:0px 50% 0px 50%;
//this can be removed, but is just for test sake.
background-color:#bbb;
width:100px;
height:100px;
}

I hope this will help, kind regards Bert Jan.

Skin

this is not an answer to the question – Macfarlane

The question was about IE8 and not IE5 – Macfarlane

@Macfarlane - The question was about Quirks Mode, which is an IE5-compatibility mode. Therefore it's a perfectly good answer to the question. (the question itself is horrible; no-one should be using quirks mode these days, but the answer is fine for the question) – Breault