Jump to content

Table cell larger than contained image when using HTML5


Recommended Posts

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 by L.Adlon
Link to comment
Share on other sites

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 by L.Adlon
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...