3

I have a table displaying some data and I need the table cell <td> to have a fixed height and a bottom border. The problem is that Firefox is rendering the cell height differently than Chrome or IE8. For example I have the following css rules:

table {
    width: 100%;
    border-collapse: collapse;
}

table td {
    height: 35px;
    border-bottom: 1px solid #000;
}

Firefox renders the border inside the cell defined height so it shows 34px height + 1px border. Chrome and IE however render the full height and display the border outside/below that so it shows 35px height + 1px border.

Here's a preview of the issue http://jsbin.com/oseqiz/9/. (open it in both Firefox and Chrome/IE to see the difference).

Is this a known bug in Firefox or are the 2 other browsers doing things incorrectly. If so, is there any fix for it?

I'd like to point out that I don't like having the extra <div> inside the <td> like I did for the second table in the above jsbin example. I implemented it like that so the rendering issue can be seen easily.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Bogdan
  • 43,166
  • 12
  • 128
  • 129
  • maybe this will help you - http://css-tricks.com/7323-box-sizing/ - Any reason why your td shows to be 18.4px in IE9 on windows 7? – Jawad Sep 25 '11 at 18:59
  • Remove border-collapse: collapse; and add box-sizing: border-box; and -moz-box-sizing: border-box; to see what happens. – Jawad Sep 25 '11 at 19:16
  • @Jawad: Thanks for the reply but it doesn't seem to do much good. border-box seems to be default value for box-sizing in Firefox so I tried setting the same value for -webkit-box-sizing and expected to see the same result in chrome. But it does not seem to matter as chrome still computes the height as 35px - [http://jsbin.com/oseqiz/18/](http://jsbin.com/oseqiz/18/) – Bogdan Sep 26 '11 at 10:21
  • @Jawad: also in response to your question about the height in IE9 on Windows 7. For me it renders the same as in Chrome 35px. I checked the metrics with DebugBar on IE and the computed layout value for the height is 35px. I did the same with Developer Tools in Chrome and got 35px and with Firebug in Firefox and there I get 34px regardless of how I set the box sizing value. – Bogdan Sep 26 '11 at 10:24
  • I may be wrong, but is not box-sizing: content-box the default value in Firefox? Looking it up in Firebug on Firefox and the "layout" tab with the box model and dimensions and at the bottom it says box-sizing: content-box. Also https://developer.mozilla.org/en/CSS/box-sizing – Jawad Sep 26 '11 at 11:18
  • It seems Firfox has an additionl value which is not in the standards. Apart from "content-box" which is the default value and the "border-box" it also has the "padding-box" value. However it seems different values have no effect at all. – Jawad Sep 26 '11 at 11:28
  • Lets see what happens with this - http://stackoverflow.com/questions/7554731/css-property-box-sizing-has-no-effect-on-the-box-model – Jawad Sep 26 '11 at 11:59

2 Answers2

0

This issue seems to have been fixed with the latest version of Firefox (which at this time is version 40), and the height and border is now rendered consistently within all the mentioned browsers.

Bogdan
  • 43,166
  • 12
  • 128
  • 129
0

Ok, please read this

css property box-sizing has no effect on the box model

A workaround could be, is to set

td
{
display: inline-block;
}

And than use

td
{
box-sizing: content-box;
}

For a cross-browser same height <td>

Community
  • 1
  • 1
Jawad
  • 8,352
  • 10
  • 40
  • 45
  • Thanks for the suggestion but adding `display: inline-block` only messes things up even further. I forgot to point out - and incorporate into my jsbin initial example - the fact that one cell in my table is fluid (`width: auto`) while the rest have fixed width. Changing the `display` property to `inline-block` collapses the width of the fluid column. – Bogdan Sep 26 '11 at 14:07
  • But it does render the height correctly as 35px (which unfortunately is of little help as long as the rest of the layout is ruined) – Bogdan Sep 26 '11 at 14:09
  • does it mess up even if u set the display: inline-block for all td except the one that you want fluid. – Jawad Sep 26 '11 at 16:59
  • Yes it does mess it up (albeit not as badly as when the fluid one had also `inline-block`) – Bogdan Sep 27 '11 at 09:09
  • give me your code for the table please. Some celever coding using positioing along with display may get the desired results you want. – Jawad Sep 27 '11 at 09:13
  • You can have a go at it here [http://jsfiddle.net/U8mxE/1/](http://jsfiddle.net/U8mxE/1/). – Bogdan Sep 27 '11 at 10:02
  • The implications of this answer is awful – Blowsie Feb 13 '12 at 11:57
  • @Blowsie: You are wellcomed to downvote it or come up with an answer who's "implications are not awful" – Jawad Feb 14 '12 at 00:44