{"id":788,"date":"2012-04-30T16:32:06","date_gmt":"2012-05-01T02:32:06","guid":{"rendered":"http:\/\/mymonkeydo.com\/?p=788"},"modified":"2012-04-30T16:32:06","modified_gmt":"2012-05-01T02:32:06","slug":"firefox-table-row-height","status":"publish","type":"post","link":"https:\/\/mymonkeydo.com\/firefox-table-row-height\/","title":{"rendered":"Firefox Table Row Height"},"content":{"rendered":"
In Firefox and Chrome, having a table with an image of height 1 causes the row height to be 6px. \u00a0 Code as shown below:<\/p>\n
<\/p>\n
<table height=”1″>
\n<tr>
\n<td><img src=”images\/spacer.gif” width=”170″ height=”1″ alt=””><\/td>
\n<td><img src=”images\/spacer.gif” width=”163″ height=”1″ alt=””><\/td>
\n<td><img src=”images\/spacer.gif” width=”334″ height=”1″ alt=””><\/td>
\n<td><img src=”images\/spacer.gif” width=”153″ height=”1″ alt=””><\/td>
\n<td><img src=”images\/spacer.gif” width=”180″ height=”1″ alt=””><\/td>
\n<\/tr>
\n<\/table><\/p>\n
<\/p>\n
After setting all styles that I could think of (padding, margin, height, vertical-alignment, line-height) and every element to have a height attribute of 1, nothing worked. \u00a0Turns out all that is needed is a “display:block” for the img element:<\/p>\n
<table height=”1″>
\n<tr>
\n<td><img style=”display:block;” src=”images\/spacer.gif” width=”170″ height=”1″ alt=””><\/td>
\n<td><img style=”display:block;” src=”images\/spacer.gif” width=”163″ height=”1″ alt=””><\/td>
\n<td><img style=”display:block;” src=”images\/spacer.gif” width=”334″ height=”1″ alt=””><\/td>
\n<td><img style=”display:block;” src=”images\/spacer.gif” width=”153″ height=”1″ alt=””><\/td>
\n<td><img style=”display:block;” src=”images\/spacer.gif” width=”180″ height=”1″ alt=””><\/td>
\n<\/tr>
\n<\/table><\/p>\n