Skip to main content
Inspiring
May 7, 2014
Question

Why is CF11 adding the x-border-box class to <html>?

  • May 7, 2014
  • 0 replies
  • 471 views

In CF10, if you used cflayoutarea on a page, you could expect a couple classes added to <body> and <html> - namely, ext-webkit, ext- (your browser) to <body> and ext-strict to <html>. These are pretty specific classes and don't interfere with much.

In CF11, cflayoutarea adds the x-border-box class to your <html> tag, giving your entire page the following style from ext-all.css:

.x-border-box,

.x-border-box * {

  box-sizing: border-box;

  -moz-box-sizing: border-box;

  -ms-box-sizing: border-box;

  -webkit-box-sizing: border-box; }

The potential pool of things with which this will interfere is much larger.

May I ask why CF does not just add the necessary styles to the top level <div> it uses for cflayoutarea? If I remove the CSS from ext-all, then cflayoutarea looks wrong. I know that I could go in and copy those styles to one of the classes on the parent <div> generated by cflayoutarea, or the parent <ul>, but then I'm monkeying around with CF's ext-all.css for every CF install we work with.

This topic has been closed for replies.