Hotmail - text and image alignment problem

I have an image in Column 1 of a table and text in Column 2.
In Outlook 2007 and GMail the text is flush with the height of the image.
In Hotmail the text is not flush with the image.
See what I mean here below.  Any ideas what causes this?
http://img443.imageshack.us/img443/7052/capturelul.jpg

neondog, 5 years ago

Can you post the code? I can only think that there's whitespace left in there somewhere.

Have you attached style="display: block" to the image?

expertiseontap.co.uk expertiseontap.co.uk, 5 years ago

Sorry for delayed reply neondog, I didn't receive email notification of your reply.
I added display block as you suggested but problem still recurs.  Here's the code:

<table width="525" height="342" border="0" cellpadding="0" cellspacing="0">
                  <tr>
                    <td width="251" height="342"><img src="http://img717.imageshack.us/img717/6242/57130434.jpg" alt="Please hire me" width="229" height="342" style="display: block"  /></td>
                    <td width="274" height="342" class="style254">We're recruiting for a receptionist. 
                    Can you help us in  finding the right candidate? <br />
                    <br />
If you know of anyone who might  be suitable please <forwardtoafriend>forward</forwardtoafriend> this mail to them. <br />
<br />
If you or your recommended friend are appointed to the position <span class="style239">we'll give you &pound;300 of Stuart Holmes Hair &amp; Beauty Spa vouchers</span> to use on  services at the salon. </td>
                  </tr>
                </table>


Julian Wellings | Expertise on Tap 
Email Marketing | Video Marketing | Cheltenham UK
Follow me on Twitter
Stig Stig, 5 years ago

Hi Julian,

Sorry if I misunderstood what you're trying to do, but would adding valign="top" to the table cells solve this?

Stig


The Campaign Monitor Blog – HTML email smarts to go with your good looks.
expertiseontap.co.uk expertiseontap.co.uk, 5 years ago

Hi Stig and thanks.
The issue is in Hotmail the text is slightly deeper than the image. It should be the other way round as per this screen grab from Outlook 2007..
http://img41.imageshack.us/img41/7240/capturezp.jpg


Julian Wellings | Expertise on Tap 
Email Marketing | Video Marketing | Cheltenham UK
Follow me on Twitter
Stig Stig, 5 years ago

Hi Julian,

Thanks for clarifying. What seems to be happening is, both cells/columns are centered vertically in both screenshots. But the text is being rendered with different line heights, causing the text column to be taller than the image in Hotmail, and the opposite in Outlook 2007.

So if you want to control the position each column's top compared to the other, I think you'll want to want to add valign="top" to both <td>s. Then if you want to push the text down a little, you can use a <div> with a font-size to add some top padding.

Here's an example you could try:

<table width="525" height="342" border="0" cellpadding="0" cellspacing="0">
                  <tr>
                    <td width="251" height="342" valign="top"><img src="http://img717.imageshack.us/img717/6242/57130434.jpg" alt="Please hire me" width="229" height="342" style="display: block"  /></td>
                    <td width="274" height="342" class="style254" valign="top">
                    <div style="font-size:6px">&nbsp;</div><div>We're recruiting for a receptionist. 
                    Can you help us in  finding the right candidate? <br />
                    <br />
If you know of anyone who might  be suitable please <forwardtoafriend>forward</forwardtoafriend> this mail to them. <br />
<br />
If you or your recommended friend are appointed to the position <span class="style239">we'll give you &pound;300 of Stuart Holmes Hair &amp; Beauty Spa vouchers</span> to use on  services at the salon.</div></td>
                  </tr>
                </table>

Stig


The Campaign Monitor Blog – HTML email smarts to go with your good looks.
expertiseontap.co.uk expertiseontap.co.uk, 5 years ago

Thanks Stig.  This enews has already gone out but the issue happens frequently so will try your fix next time!


Julian Wellings | Expertise on Tap 
Email Marketing | Video Marketing | Cheltenham UK
Follow me on Twitter
Richard.Wendon Richard.Wendon, 5 years ago

Have you checked the source code of the email now its been sent? Check to make sure <p> tags haven't been added around the section in question by CM. If they have let me know.

expertiseontap.co.uk expertiseontap.co.uk, 5 years ago

Nope.  No <p>s in source code Richard.


Julian Wellings | Expertise on Tap 
Email Marketing | Video Marketing | Cheltenham UK
Follow me on Twitter

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098