CSS tables and border widths in Safari

During a recent project I’ve been experimenting a bit with CSS tables.

I’ve come across a strange behavior in Safari, which I’m pretty sure is a bug. When an element’s display is set to “table,” it appears that Safari calculates with width of the box by subtracting the border width. When an element is set to display:block, Safari behaves normally, add the border width in addition to the set width of the box.

I’ve set up a quick demonstration to make this clear.

So far I’ve only tested this in Safari 3.2.1 (Mac) and Safari 4 beta (Mac).

FF3 (Mac), Opera 9 (Mac) and IE8 (Win) all seem to be behaving as expected.

I’ll give it a try in Safari 4 beta when I get home tonight.

I retrieved the calculated width using Safari’s Web Inspector.

I’d be interested to know if anyone else has seen this, or if anyone knows of a way to code around it, aside from adding additional divs. For the moment, I’m just going to fall back on a floated layout.

3 thoughts on “CSS tables and border widths in Safari

  1. According to quirksmode: Safari and Chrome require elements with display: table and display: table-row to show the cells correctly. The other browsers don’t.

    Quirks mode

  2. Hey Ross,

    Thanks for the pointer to the quirksmode article. He’s nothing if not comprehensive.

    I’ve updated the example with two sets of divs that include display:table-row and a display:table-cell elements.

    The calculated width still appears to be off in Safari.

    In addition, I’ve now confirmed that the same issue exists in Safari 4.

    When I have some time, I’ll quickly test this in the latest Webkit nightly. I’ll also do some digging in the Webkit bug tracker to se if I can find any mention of this issue.

    Let me know if you turn up anything else.

  3. Some of the bugs or inconsistencies in rendering on Safari (example: the way it handles margins sometimes) have almost driven me nuts in the past.

    Had to rewrite the whole CSS once in order to make it Safari compatible also, while it worked on all other browsers including IE6!

Comments are closed.