Table cell larger than contained image when using HTML5

[L.Adlon]

Hi. The battle to go HTML5 continues...

 

So, the latest thing is that I have a table that contains a 960x20 image (and the cell is the same size).

 

In HTML4.01, it's fine. In HTML5, the side and bottom of the cell expands a few pixels.

 

I tried applying a style to the cell, setting the padding and margins to 0, setting the width and height, yet the 4(?) pixel padding on the sides and bottom remain.

 

Set the DOCTYPE to HTML4.01, and it all snaps back to how it should be.

 

I know that HTML5 doesn't support a lot of attributes, but I'm really not sure what is happening with this, or how to fix it. Everything I try (via CSS) hasn't had any affect.

 

Any help?

Edited June 20, 2014 by L.Adlon

[L.Adlon]

For those following along: The horizontal shifting/gaps were seemingly resolved with the style 'border-collapse:collapse;' applied to the <table>.

 

I still have about 2-3 pixels padding at the bottom of the cells. I actually managed to get rid of that in my test, but I don't recall exactly how now. I think it ultimately was some sort of a border thing. I had set the borders and margin and padding all to zero (which I have in this current one), but there was something more, that was similar, that I did. I'll let you know if I run into it.

 

 

[Moments later...] I got it. I added a 'line-height:0px' to the style of the <table>.

 

Just checking things over now, seeing if everything is resolved... including on other browsers.

Edited June 20, 2014 by L.Adlon