CSS positioning problems

[Earl Parker II]

I've been working with CSS fairly intensively for about 3 weeks now (which means I know about enough to be dangerous), with the goal of eliminating tables as much as possible in favor of CSS. In that time I've been doing a lot of experimenting and reading, including reading in this forum.

The bulk of my CSS problems have to do with positioning items in general and centering them on the page in particular. So far I've come to the following conclusions- in general:

1. Using absolute positioning works pretty well until you try to center items (such as a graphic) on a page. I've found one way to do it- body {text-align: center}- and I'm sure there's others but body {text-align: center} seems to create other problems.

2. Using relative positioning works pretty well until you find you need to go back and change the position of one item, which unleashes a minor nightmare.

I'm not asking for specifics, I'd just like to know if I've got a decent handle on the above issue or if I'm really out in left field here. BTW, I'm using IE6 (which I understand does have a few problems with CSS2) and margin: 0 auto; doesn't seem to center anything in IE6.

Any feedback would be most welcome.

[meow]

'text-align: center' is correct for inline content (like an image) but not for block level elements. It's a bug in IE that makes it work and it's an often used work-around for IE versions < 6.

The reason 'margin: auto' doesn't work in IE6 is that you either use a doctype that puts IE in Quirks Mode or don't use a doctype at all. All modern browsers use what's lovingly called "Doctype Switching". In Quirks Mode IE6 emulates the broken box model and other flaws in earlier versions.

Still, IE6 is old now and far behind when it comes to CSS support. I really recommend that you use Mozilla as a learning tool as it's more likely to get it right and then add work-arounds for IE. Opera 7 also has very good CSS support. If you assume that IE gets it right you can easily hurt yourself. :p

Some URLs:

Activating the Right Layout Mode Using the Doctype Declaration
http://www.hut.fi/u/hsivonen/doctype.html
CSS Enhancements in Internet Explorer 6
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp
Mozilla's quirks mode
http://mozilla.org/docs/web-developer/quirks/
The Opera 7 DOCTYPE Switches
http://www.opera.com/docs/specs/doctype/

[Earl Parker II]

Thank you very much for the reply. After reading through the links you supplied I have a better idea of what's going on and why. I've also downloaded and installed Mozilla 1.4 for development work as per your recommendation.

Quick question- if I were to use IE6 for development work, if I'm reading correctly the use of a Strict doctype would make non-compliant HTML and CSS code more obvious when the page was rendered- right or wrong?

Thanks again for shining the light.

[meow]

Right. But (there are two buts). IE6 is buggy. Some people actually prefer to put it in Quirks Mode since we still have to cater to IE5.x anyway. And it has limited CSS support compared to Moz and Opera. So if you use IE primarily check _frequently_ in other browsers so you don't end up with a perfect looking page after weeks of work just to see it fall apart in a better browser. Makes kittens cry, that. :D

Also, if you are new, it's easy to assume that when something seemingly works you have understood it right. It's easier to learn with a browser that's more likely to render things as they are supposed to be. It's frustrating and confusing to have to re-learn. I know. I've been there. And I'm still confused. :o