Table Height in html email

submissiontechnology
submissiontechnology used Ask the Experts™
on
Hi, I'm having a styling problem with a table height whilst building a HTML newsletter.

Here is my code:

   <table cellspacing="0" cellpadding="0" width="100%" height="41" style="height:41px;overflow:hidden;margin:0;padding:0;line-height:14px;">
    
    <tr style="color:white;font-size:12px;line-height:normal;background-color:#666;line-height:14px;">
        <td align="left" width="29" valign="bottom"><img src="http://www.afform.co.uk/images/newsletters/footer_left.gif" style="margin:0;padding:0;" width="29" height="41" /></td>
        <td align="left" style="background-color:#666;line-height:14px;"><p style="margin:0;padding:0;"><span style="line-height:14px;font-size:14px;color:white;padding:0;margin:0;">Visit <a href="http://www.afform.co.uk/" title="Visit afform" style="color:white;">http://www.afform.co.uk</a> to log-in to afform (your publisher ID is <AffID>)</span></p></td>
        <td align="right" width="29" valign="bottom"><img style="margin:0;padding:0;" src="http://www.afform.co.uk/images/newsletters/footer_right.gif" width="29" height="41" /></td>
    </tr></table>

Open in new window


The attached image shows that the table height is running over by 3px in most email clients.  The left and right rounded corner images are 41px high and so should be the table height. You can see I've attempted to correct the problem by applying height:41px; and overflow:hidden;

Any help is appreciated!
hotmail.gif
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
in line 1, you have given height attribute as 41,
please try
-- either remove that attribute
-- or make it '41px'
Commented:
I think the problem is line-height. (try fix this first)
However try setting the table background-color:white and remove height and overflow in style=""

<table cellspacing="0" cellpadding="0" width="100%" height="41" style="background-color:white;overflow:hidden;margin:0;padding:0;line-height:14px;">

Commented:
Hi,

I have createdd new html for your code, pls use this

<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td><img src="http://www.afform.co.uk/images/newsletters/footer_left.gif" width="29" height="41" /></td>
<td style="width:100%;background-color:#666; color:#fff;">
Visit <a href="http://www.afform.co.uk" title="Visit afform" style="color:#fff">http://www.afform.co.uk</a> to log-in to afform (your publisher ID is <AffID>)</td>
<td><img src="http://www.afform.co.uk/images/newsletters/footer_right.gif" width="29" height="41" /></td>
</tr>
</table>

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial