How do I prevent extra space below text in a table cell?
I need some help. I am trying to prevent extra space from occurring below the bottom line of text in a table cell. (the table has a rollover link and the text has a 85% line height that are both needed) I've开发者_如何学运维 also tried CSS to set the line height but same problem. The 3 column table needs to stay at 46px high but expands to 57px high when altering the line height to 85% which is needed. This will be used on a mobile webpage. A solution would be VERY, VERY appreciated. thanks.
link to the webpage: http://www.m.dcgraphicsandphotography.com/table_BG_test10.html
<table class="dsR62" border="0" cellpadding="0" cellspacing="0">
<tr onmouseover="this.style.background='url(images/button_BG_ov.jpg)';this.style.cursor='pointer'" onmouseout="this.style.background='url(images/button_BG.jpg)';" onclick="DoNav('dvd.html/');">
<td class="dsR23">
<div align="right">
<img src="images/ICON-RGB.gif" alt="" height="39" width="40" border="0" /></div>
</td>
<td class="dsR50">
<div align="left">
<p style="line-height:85%;"><span class="ds3"><span class="ds4">DVD TRANSFERS</span></span><span class=""><span class="ds3"><span class="ds3"><br />
</span></span></span><span class="ds3"><span class="ds5">From videos, photos and slides</span></span></p>
</div>
</td>
<td class="dsR25"><img src="images/button_arrow.gif" alt="" height="36" width="35" border="0" /></td>
</tr>
</table>
<p style="line-height:85%; margin-bottom: 0px;">
<span class="ds3">
<span class="ds7">DVD TRANSFERS</span>
</span>
<span class="ds6">
<span class="">
<span class="ds3">
<span class="ds3">
<br>
</span>
</span>
</span>
</span>
<span class="ds3">
<span class="ds8">From videos, photos and slides</span>
</span>
</p>
Does that fix it? (margin-bottom:0px;
)
Thanks. That got rid of the space at the bottom but the 2 lines of text needs to be centered vertically in the cell with the cell staying at 46px high. I apologize I didn't mention that it needed to be centered vertically. But I think I'm on the doorstep of a solution. (been Googling for 2 days for an answer to this!) Got if under control. I added a margin-top:8px; with the margin-bottom:3px; and was able to totally control the vertical position. thanks for all the help.
the resulted code fix: (showing only the first line)
<p style="line-height:85%; margin-top: 8px; margin-bottom: 3px;">
精彩评论