One of my favorite, but underused HTML elements is the CAPTION element. The CAPTION element should be be a description of the table while a TH should be a heading for a column. I think too often people use the TH element on HTML forms that really contain no tabular data and shouldn't be in a table regardless (yes I'm a hypocrite). The CAPTION element would be better suited to describe an HTML form than a TH tag.
After using the CAPTION element for awhile now, I've noticed that in some browsers, it appears to be a pixel shorter in width than in other browsers. Below, take a look at the top left of the table. You'll see that there appears to be a 1px discrepancy. This happens in all versions of Firefox and in Internet Explorer. The bug doesn't affect Opera, Safari, or Google Chrome.
The Solution
The following code will fix the bug in Firefox and Internet Explorer.
caption { margin-left: -1px; }
A Better Solution To The 1px Caption Shift Bug
I would recommend doing the opposite of the selector above and leave the CAPTION margin at 0px but target Firefox and Internet Explorer using CSS hacks. I suspect that Firefox and Internet Explorer are actually in the wrong here and that the others are in the right.
/* Target Firefox */
@-moz-document url-prefix()
{
caption { margin-left: -1px; }
}
/* Target IE (or use IF IE statement ) */
caption { _margin-left: -1px; }
