I'm converting a circa 2002 website to comply with html5/CSS3, without rewriting it extensively. I'm not familiar with the nuances of HTML5 in terms of rendering, and I can't find this particular issue in the references.
The validation errors consist of no longer used attributes, so I'm thinking to upgrade the .css file to replace them, and dropping them from the HTML tags. I've shortened the example for simplicity.
There is a controlling table, 1 row x 5 cells, each 150W x 100H. Each holds an image exactly 150W x 100H. In the CSS I've set the table and cell margins & paddings to zero, set the border to none, collapsed the border, defined the cell heights and widths be the above, and set the background to a high constrast in order to see what's going on.
I am getting a 2 pixel background leak past the bottom of each image, showing up as a solid line across the bottom of the table. Something is forcing open space down there. I cannot find a reference to what it might be, but someone here will know immediately, I believe. I've checked the rendering in Firefox 15.0.1 and IE 10 so far, and the behavior is the the same in both.
I don't believe there is a syntax error in the CSS. More likely there's something new I don't know about. In fact, I can put the HTML5 DOCTYPE on the page, and change none of the obsolete attributes, and none of the CSS, and get the same rendering. I.e. extra pixels along the bottom. Of course, it renders fine without the DOCTYPE.
What am I missing to bring it into compliance and still render without the extra space?