Box-sizing & -moz-box-sizing for tables

HTML & CSS
1

Alright guys and gals,

I’m pretty frustrated with box-sizing at the moment. Working on a client project and because of Mozilla’s odd decision to set border-box as the default value of box-sizing for tables in all the newer versions of Firefox, I am now dealing with inconsistency between FF3.6+ and Webkit browsers.

Particularly with my table header cells, here’s my code:


<table width="100%">
  <thead>
    <tr>
      <th class="rc_provider">Provider</th>
      <th class="rc_patient">Patient</th>
      <th class="rc_phone">Phone</th>
      <th class="rc_time">Time</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="rc_provider"><span class="content_icn phone16"></span><a href="#">Dr. Doug Parent MD</a></td>
      <td class="rc_patient"><a href="#">Kevin Milden</a></td>
      <td class="rc_phone">(805) 708-7308</td>
      <td class="rc_time">12:30 PM</td>
    </tr>
    <tr class="even">
      <td class="rc_provider"><span class="content_icn phone16"></span><a href="#">Dr. Doug Parent MD</a></td>
      <td class="rc_patient"><a href="#">Kevin Milden</a></td>
      <td class="rc_phone">(805) 708-7308</td>
      <td class="rc_time">12:30 PM</td>
    </tr>
...


  div table {
    border-collapse:collapse;
    border-spacing:0;
    border-width:0;
    text-align:left;
    -moz-box-sizing:content-box !important;
    -ms-box-sizing:content-box !important;
    -webkit-box-sizing:content-box !important;
    box-sizing:content-box !important;
  }
    div table th {
      background:url(../images/th_divider_grad.png) right bottom no-repeat;
      border-bottom:1px solid #d1d1d1;
      -moz-box-sizing:content-box !important;
      -ms-box-sizing:content-box !important;
      -webkit-box-sizing:content-box !important;
      box-sizing:content-box !important;
      font-size:11px;
      font-weight:normal;
      height:18px;
      padding:15px 0 0 15px;
      vertical-align:top;
    }

As you can see there, even though Webkit’s default value is already set to content-box, I went ahead and set it for browser engines trying to force it and make sure it’s the same across the board. Well. It didn’t work, and it doesn’t even work for webkit when I try to force them all to have border-box instead, and make the necessary adjustments. I have spent hours researching and trying different things. I’ve done a search here in the forums with no results coming back.

What am I missing about how this property is implement in gecko and webkit? I’ve read the spec about box-sizing at W3C’s site, and have read some discussion about it on other forums and Q/A sites. If you check out Mozilla’s developer network CSS reference, it even states that the default value should be content-box, yet they didn’t implement it that way, for tables at least.

For the time being I’m using this fix that I’m not too happy with using, to declare a different height and padding for firefox:


@-moz-document url-prefix() {
  div table th {
    padding-top:15px !important;
    height:33px !important;
  }
}

I almost forgot to provide you with a view of the behavior, here’s a link where you can view the problem in Chrome/Safari and Firefox. The Dashboard (index) or Providers page both have tables that will demonstrate the issue. Currently I have the CSS uploaded w/out the FF fix i displayed up above, so that you may see the behavior:
http://dl.dropbox.com/u/37971131/RingRx/index.html

Please help!

-Alex966

2

Hi,

The Mozilla docs say that box-sizing doesn’t apply to table-cells and I guess other browsers have similar restrictions with changing their default model on table cells.

The problem seems to be that height on table cells was something that was never desired right from the start as the height attribute was never valid for table cells right back in the early days.

I always avoid height on tables and in your example above you can remove the box-sizing and remove the height form the table cell and just use line-height and padding and I think that you’ll find that most browsers will render it pretty much the same.


 div table th {
      background:url(../images/th_divider_grad.png) right bottom no-repeat;
      border-bottom:1px solid #d1d1d1;
      -moz-box-sizing:content-box !important;
      -ms-box-sizing:content-box !important;
      -webkit-box-sizing:content-box !important;
      box-sizing:content-box !important;
      font-size:11px;
      font-weight:normal;
  [B]    line-height:18px;
      padding:15px 0 0 15px;[/B]
      vertical-align:top;
    }

That will provide a table-cell at 33px height.

Some of the defaults are not explicitly defined and you will find variations on box models on some other elements which differ between browsers (e.g. object, submit ,select, table-cells).

It would be nice if all behaved exactly the same though :slight_smile:

3

Thanks Paul,

I had a feeling you’d be the one to provide me with a solution to this problem. I did read Mozilla Docs on box-sizing, and saw that -moz-box-sizing does not work on table cells, but I could not find anywhere else that webkit doesn’t support -webkit-box-sizing or box-sizing on cells. So, at that point I tried just setting border-box for webkit, so that it would display like the Gecko engine renders it.

If you inspect the table cells in Firebug or even Chrome’s developer tool, you will find that box-sizing or the appropriate extension of it is listed in the application stylesheet. Oh well, I guess they like to help make the rules, then just not follow them, or at least not some of them.

I will use your suggestion of the line-height. That’s a technique I used to use awhile back, then again this is my first project since January, I am still a bit rusty on my CSS tricks.

Thanks again Paul.

Oh one more thing, do you know if the same rule applies to text input fields? ie. <input type=“text”>
because last night I was building a page on this project and noticed that after setting the dimensions of the text field, it was wider in Chrome than in FF. Both are the newest versions of their respective browser.

-Patrick

4

The input type=text uses the correct box model but type=submit and selects use the old (border-box) box model. However form controls are quite browser specific and there are many more styles applied to these elements than the normal rules that we see.

The reason is that form controls have specific behaviours such as outlining on focus and achieving a depressed look when clicked. If you were to lock at just a snippet of the internal stylesheet for forms in Firefox you can see what you are up against.

extract from forms.css


button, 
input[type="reset"],
input[type="button"],
input[type="submit"] { 
  -moz-appearance: button;
  /* The sum of border-top, border-bottom, padding-top, padding-bottom
     must be the same here, for text inputs, and for <select>.  For
     buttons, make sure to include the -moz-focus-inner border/padding. */
  padding: 0px 6px 0px 6px;
  border: 2px outset ButtonFace;
  background-color: ButtonFace;
  color: ButtonText; 
  font: -moz-button;
  line-height: normal !important;
  white-space: pre;
  cursor: default;
  -moz-box-sizing: border-box;
  -moz-user-select: none;
  -moz-binding: none;
  text-align: center;
}

button {
  /* Buttons should lay out like "normal" html, mostly */
  white-space: normal;  
  text-indent: 0;
}

*|*::-moz-button-content {
  display: block;
}

button:active:hover,
input[type="reset"]:active:hover,
input[type="button"]:active:hover,
input[type="submit"]:active:hover {
  padding: 0px 5px 0px 7px;
  border-style: inset;
}

button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
  padding: 0px 2px 0px 2px;
  border: 1px dotted transparent;
}

button:focus::-moz-focus-inner,
input[type="reset"]:focus::-moz-focus-inner,
input[type="button"]:focus::-moz-focus-inner,
input[type="submit"]:focus::-moz-focus-inner,
input[type="file"] > input[type="button"]:focus::-moz-focus-inner {
  border-color: ButtonText;
}

That’s just a small snippet of the Firefox forms.css which should be able to find in the res folder on pc systems.

However back to your question on inputs it may be that the browsers have different padding and borders by default so you need to set them explicitly.

I made a small test file which I keep for reference as I always forget and you can refer to this for a quick guide.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
input, select {
	font-family:Arial, Helvetica, sans-serif;/* need to set for IE6/7 or it won;t inherit properly*/
}
input,span,select{
	display:inine-block;
	vertical-align:middle;
	font-size:13px;
}
input,select{
	width:80px;
	color:#999;
	border:1px solid #999;
}
input{
	padding:0 10px;
	height:30px;/* uses normal box model */
}
select{
	padding:5px 2px 5px 10px;
	height:32px;/* uses broken box model*/
	width:160px;
	line-height:26px;/* safari doesn't use height but fiddle with line-height until it looks right*/
}
#compare{
	height:32px;/* uses broken box model*/
	border:1px solid #999;
	background:#ccc;
}


</style>
</head>
<body>
<form id="form1" method="post" action="">
	<fieldset>
	<legend>Chunky form test</legend>
	<input type="text" name="amount" id="amount" value="test" />
	<select name="pound" id="pound">
		<option value="test">test</option>
	</select>
	<span>in</span>
	<select name="euro" id="euro">
		<option value="test2">test2</option>
	</select>
	<input type="submit" name="compare" id="compare" value="Submit" />
	</fieldset>
</form>
</body>
</html>

There will still be differences between systems as most mac form controls are styled for the mac and some are completely different (like selects and form inputs).

It’s a shame that form controls weren’t all just made exactly the same and that we couldn’t alter them.:slight_smile: We could just tell designers that it can’t be done then.

5

Thanks for that info Paul, and yes I agree with you it is definitely a shame. Such is the life of the web developer.

-Patrick