Menu
I've looked through the site, and haven't been able to find anything that addresses this particular question as it relates to html5. Though it's always possible I overlooked it... How do I get a row height of 1px in a table using html5? The following code works as expected in html 4.01 (I've thrown in everything including the kitchen sink in an attempt to get the row height to be just 1px in html5, with background colors added to show the table row):
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<body style="background-color:#F3F3F3;">
<table style='width:500px; vertical-align:top; border-collapse:separate; border:0px; padding:0px; border-width:0px; margin:0px;'>
<tr style="line-height:1px; vertical-align:top; border-collapse:separate; border:0px; padding:0px; border-width:0px; height:1px; margin:0px; max-height:1px;">
<td style="background-color:red; line-height:1px; vertical-align:top; border-collapse:separate; border:0px; padding:0px; border-width:0px; height:1px; margin:0px; max-height:1px;">
<img style="width:100%; height:1px;" src="/images/pixsolid.gif" alt=''>
</td>
</tr>
</table>
</body></html>
It displays as you would expect, as a 1 pixel high row.
But if I use the identical code with a doctype of:
<!DOCTYPE html>
It displays as a 6 pixel tall row... The top 5 pixels with the background color of red, and then the 1 pixel high image line. (I would have posted actual images, but I'm new here, and StackOverflow won't let newbies post images.)
The problem appears identical in the latest versions of Firefox, Chrome, & IE, so I expect I'm missing something...
Any suggestions would be much appreciated.
459
I had the same problem with an HTML table containing only images. After changing the doctype to HTML 5, Chrome, Firefox and IE displayed the table cells with a height larger than the image whereas before the cells were just as big as the images they contained.
It seems that for HTML 5 the browsers will size the table cells no smaller than your font-size and line-height would allow for text content. So to achieve the same look as before I used the following inline CSS rules:
<table style="font-size: 1px; line-height: 0;">
...
</table>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
