It has been my problem because I needed to use quirks mode due to Ext not playing well in standards compliant mode and still have an element, a container with fixed width, centered in the browser's window working cross-browser

Share This Post

It has been my problem because I needed to use quirks mode due to Ext not playing well in standards compliant mode and still have an element, a container with fixed width, centered in the browser’s window working cross-browser. Standard approach is to use css:
#ct {
    width: 960px;
    margin: auto;
}
Nice and simple but it doesn’t work in IE in quirks mode, works in strict mode though. Another approach I’ve found googling for a solution was:
body {
    text-align: center;
}
#ct {
    width: 960px;
    margin: auto;
    text-align: left;
}
This works, also in IE, but the problem is that Ext creates many elements as direct children of the body so it introduced many rendering problems such as menu items appeared centered, combo box dropdown items were centered, messages in message boxes, etc. Finally, this works everywhere without bad side effects:
#ct-wrap {
    text-align: center;
}
#ct {
    width: 960px;
    margin: auto;
    text-align: left;
}
with this markup:
We do not touch body here but we create a “container wrap” that center aligns texts and inside of it our real container in which we set text alignment back to left. Works perfect cross browser.
Follow me:
Latest posts by saki (see all)

Want to collaborate on an upcoming project?