Create a centered page layout with CSS

Web Development

Collapse -

Important to Note

by john · 13 years ago In reply to Create a centered page la ...

It's important to note for browser compatibility and to avoid quirk mode rendering, this method currently only works when a STRICT or TRANSITIONAL DOCTYPE declaration is implemented.

It also does not work in IE if you include:

<?xml version="1.0" encoding="UTF-8"?>

above your DOCTYPE.

Collapse -

Avoiding Quirks Mode

by Meadhra · 13 years ago In reply to Important to Note

It's true that for this technique (and nearly all other CSS techniques) to work properly in Internet Explorer, IE must be operating in standards mode rather than quirks mode. That means you must include a proper DOCTYPE declaration, and nothing, not even an XML prolog, can preceed that DOCTYPE.

I've written about rendering modes and DOCTYPE switching before, and I assumed that it had reached the level of "common knowledge". But maybe it's time to revisit the topic.

Michael Meadhra

Collapse -

I'm shocked

by Andrew T. Fry · 13 years ago In reply to Create a centered page la ...

I thought you were all about the majority broswer IE Michael. Yet you specifically say not to use the "text-align: center;" on a parent object, because it's a "misuse", despite it's requirement for the majority of the IE versions; if you also use an XML declaration, that includes 6.

Collapse -

by Meadhra · 13 years ago In reply to I'm shocked

I'm not "all about the majority broswer IE". On the contrary, I prefer working with clean code that's written to perform properly in standards-compliant browsers. But I'm a realist, and as such, I can't ignore the dominant browser and its various ideosyncracies, no matter how much I would like to at times.

The realist in me causes me to avoid valid CSS techniques that don't work in IE at all. However, I'm all for any CSS technique that I can get to work in most browsers, including IE in its standards mode (such as it is). Most Web builders now know how to avoid IE's quirks mode and do so routinely, so that's hardly a limitation or special circumstance anymore -- or at least, so I thought. The comments posted today lead me to believe that I may need to revisit the topic of quirks mode vs standards mode.

Michael Meadhra

Collapse -

by DaveTheWave · 13 years ago In reply to

"Most Web builders now know how to avoid IE's quirks mode"

I don't but then I'm still fairly new to this game... Does anyone have links to "good" info on this subject? I can always do a google search but perhaps ya'll can save some time...

Collapse -

Standards Mode vs Quirks Mode on MSDN

by RoboRubik · 13 years ago In reply to

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp

Collapse -

This isn't exactly what was described...

by venve · 13 years ago In reply to Create a centered page la ...

It's an excellent article but one point needs to be clarified. The opening paragraph says we're building an 800 pixel div which will be centered, but that's not what was demonstrated. We'll get that only on a 1024 wide window. The "width: 80%" says the browser will render it 80% of whatever the window size is. It would need to be "width: 800" to create an 800 pix div. I was working on building a centered page over the weekend so this article answered a real question for me. Thanks for showing how to set it up.

As for the quirks vs standards mode, I could use a revisit on that, too. I'm just branching out into CSS so I'm sure it would help me to know it. If you can demonstrate how to get absolute positioning to work the same in both IE and NS, that would be cool, too.

venve

Collapse -

Centre on vertical axis

by com-du-it.com · 13 years ago In reply to Create a centered page la ...

I understand using margin: auto to create a centred effect but it only seems to work on the horizontal axis. How do I centre on the verticle axis?

Web Development

General discussion