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
Leave a Reply