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.
- Ext, Angular, React, and Vue - 27. June 2019
- The Site Resurgence - 11. February 2018
- Configuring ViewModel Hierarchy - 19. June 2015
6 Responses
Exactly what I was looking for, thanks !
* html body {
text-align /**/: center;
}
* html body * {
text-align /**/: left;
}
works all the way down to IE5 (five)
Thank you! I was looking for that!
Thank you so much!
This was truly a life saver! 🙂
Thanks so much! I can’t develop in standards mode because our older pages aren’t compliant, and I’ve been looking for a solution for this.
Thanks a lot! One of my clients insist editing their page in a program that removes the doctype! I’ll definitely try this!