Firefox Table Row Height

Problem

In Firefox and Chrome, having a table with an image of height 1 causes the row height to be 6px.   Code as shown below:

<table height=”1″>
<tr>
<td><img src=”images/spacer.gif” width=”170″ height=”1″ alt=””></td>
<td><img src=”images/spacer.gif” width=”163″ height=”1″ alt=””></td>
<td><img src=”images/spacer.gif” width=”334″ height=”1″ alt=””></td>
<td><img src=”images/spacer.gif” width=”153″ height=”1″ alt=””></td>
<td><img src=”images/spacer.gif” width=”180″ height=”1″ alt=””></td>
</tr>
</table>

Solution

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.  Turns out all that is needed is a “display:block” for the img element:

<table height=”1″>
<tr>
<td><img style=”display:block;” src=”images/spacer.gif” width=”170″ height=”1″ alt=””></td>
<td><img style=”display:block;” src=”images/spacer.gif” width=”163″ height=”1″ alt=””></td>
<td><img style=”display:block;” src=”images/spacer.gif” width=”334″ height=”1″ alt=””></td>
<td><img style=”display:block;” src=”images/spacer.gif” width=”153″ height=”1″ alt=””></td>
<td><img style=”display:block;” src=”images/spacer.gif” width=”180″ height=”1″ alt=””></td>
</tr>
</table>

keywords: firefox table height 6
source:  http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_24084464.html