[wp-trac] [WordPress Trac] #24306: Twenty Thirteen: border-box box sizing will break many plugins

[WordPress Trac]

#24306: Twenty Thirteen: border-box box sizing will break many plugins
---------------------------+--------------------
 Reporter:  professor99    |       Owner:
     Type:  defect (bug)   |      Status:  new
 Priority:  normal         |   Milestone:  3.6
Component:  Bundled Theme  |     Version:  trunk
 Severity:  normal         |  Resolution:
 Keywords:  needs-patch    |
---------------------------+--------------------

Comment (by professor99):

 I've tested the solution I gave above using content-box sizing for the
 widget and entry-content classes and it works great.

 All you have to do is add the following.

 {{{
 /**
  * 0.0 Box Sizing
  *
  * Universally set to border box.
  *
  * Set back to standard content-box setting for content and widgets.
  *
  *
 ----------------------------------------------------------------------------
  */

 * {
         -webkit-box-sizing: border-box;
         -moz-box-sizing:    border-box;
         box-sizing:         border-box;
 }

 .entry-content, .entry-content  * {
         -webkit-box-sizing: content-box;
         -moz-box-sizing:    content-box;
         box-sizing:         content-box;
 }

 .widget, .widget * {
         -webkit-box-sizing: content-box;
         -moz-box-sizing:    content-box;
         box-sizing:         content-box;
 }
 }}}

 We also have to make some adjustments to the width settings for .entry-
 content and .widget and their children.

 For widgets we need to  adjust the width for the main DIV and it seems
 this is only defined for the footer widgets which are shortened if there
 is a sidebar (Why?).

 {{{
 .site-footer .widget {
     background: transparent;
     color: #fff;
     float: left;
     margin-right: 20px;
     width: 205px
 }

 /* Why do we do this? */
 .sidebar .site-footer .widget {
         width: 188px
 }
 }}}

 The only other thing I see that needs to be done for widgets is to adjust
 the searchform input fields. For searchform input fields border-box is the
 easiest to deal with so it's best to set it to border-box.

 {{{
 .widget .searchform input[type="text"],
 .widget .searchform input[type="search"] {
         -webkit-box-sizing: border-box;
         -moz-box-sizing:    border-box;
         box-sizing:         border-box;
 }
 }}}

 For entry-content the only thing I can see that needs to be done is adjust
 the max-width as follows.

 {{{
 .entry-header,
 .entry-content,
 .entry-summary,
 .entry-meta {
         margin: 0 auto;
         max-width: 604px;
         width: 100%;
 }

 .sidebar .entry-header,
 .sidebar .entry-content,
 .sidebar .entry-summary,
 .sidebar .entry-meta {
         padding: 0 376px 0 60px;
 }
 }}}

 If you want to this this in action check it out here
 http://test4.2rrr.org.au/?preview=1&template=twentythirteenzebra&stylesheet=twentythirteenzebra
 . Note this is my new variant (codenamed Zebra) of Twenty Thirteen that
 has working sidebars and includes many fixes. It works superbly on the
 latest versions of Firefox, Chrome, and Safari, has no problems with IE7
 and IE8, and looks great on the IPhone 4. I only have to update the RTL
 CSS, fix the dropdown menu (it looks terrible), and test a few minor bits
 and pieces and it will be complete. Once this is done I will start putting
 the 2013 fixes on Trac.  I will post the source link soon once I have
 tidied a few things up.

 I've added some box-sizing notes below that may be good to put in the
 stylesheet (or something similar) as it would save a lot of people a lot
 of time and trouble and reduce chatter in the forum.

 {{{
 /*
  * Box-sizing notes
  * ----------------
  *
  * A few notes about box-sizing that need to be considered when altering
 this
  * stylesheet.
  *
  * The latest versions of Firefox, Safari, Chrome, and Internet Explorer
 all work
  * fine with border-box sizing. IE7 and IE8 have problems which makes
 changing anything
  * in the CSS a pain.
  *
  * The key is to avoid if possible having elements with padding or borders
 combined
  * with a width property (width, min-width, max-width). These elements are
 subject to
  * box-sizing. You can use DIV containers to do this.
  *
  * IE7's quirks mode is border-box though it's standard mode is content-
 box.
  * Unfortunately it doesn't implement the box-sizing property so we have
 to amend the
  * css/ie.css IE stylesheet to define content-box settings for any
 affected selectors.
  *
  * IE8 does implement the box-sizing CSS property but has bugs. In
 particular min-width
  * and max-width are always interpreted as content-box widths.
  *
  * Keep in mind that any change in the CSS should be reflected in the
 rtl.css RTL
  * stylesheet.
  */
 }}}

 PS. If you take a look at the demo please excuse the mad ramblings of a
 WordPress plugin author as he talks a walk on the wild side with a Zebra
 he met in his test blog :)

--
Ticket URL: <http://core.trac.wordpress.org/ticket/24306#comment:25>
WordPress Trac <http://core.trac.wordpress.org/>
WordPress blogging software