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.