CODEWITHSUNDEEP
htmlcsshtml-emailoutlook-2010
Sackling
Sackling

Reputation: 1820

Outlook 2010 html email vertical 1px space between hyperlinked images

I have been working on this html for a while trying to figure out why outlook 2010 is adding this 1px white line between images that are hyperlinked.

I am pretty sure I have tried all the tricks I have read about Html emails and outlook. Below is the code/styling I am using for just 2 tables. They have 1 single image in each. If I remove the hyperlink, there is no space in outlook 2010. If I leave the hyperlink I can't find a way to get rid of the space!

<table border="0" cellpadding="0" cellspacing="0"  style="border-collapse: collapse;" width="600">
        <tr>
            <td style="border-collapse: collapse;" width="600" height="179" >
                <a href="http://www.anzie.com/" style="height: 179px;  width: 600px; margin: 0px; padding: 0px;  display:block;  float: left; border:0; vertical-align:bottom;"><img border="0" align="left" alt="Gold Rush" height="179" src="https://d2q0qd5iz04n9u.cloudfront.net/_ssl/proxy.php/http/gallery.mailchimp.com/5513172da1aa95c4b84fdedba/images/ESSETIAL6_FALL_01.jpg" style="height: 179px;  width: 600px; margin: 0px; padding: 0px;  display:block;  float: left; border:0; vertical-align:bottom;" width="600" /></a>
            </td>
        </tr>
</table>
<table border="0" cellpadding="0" cellspacing="0"  style="border-collapse: collapse;" width="600">
        <tr>
            <td style="border-collapse: collapse;" width="600" height="25">
                <a href="http://www.anzie.com/viewall_gold.php" style="height: 25px;  width: 600px; margin: 0px; padding: 0px;  display:block;  float: left; border:0; vertical-align:bottom; border:0;"><img align="left"  border="0" alt="Shop Gold" height="25" src="https://d2q0qd5iz04n9u.cloudfront.net/_ssl/proxy.php/http/gallery.mailchimp.com/5513172da1aa95c4b84fdedba/images/ESSETIAL6_FALL_02.1.jpg" style="height: 25px;  width: 600px; margin: 0px; padding: 0px;  display:block;  float: left; border:0; vertical-align:bottom;" width="600" /></a> 
            </td>
        </tr>
</table>

Any and all ideas are welcome please!

Upvotes: 1

Views: 3263

Answers (2)

awip
awip

Reputation: 31

Just a question of order with attributes, it seems... Try like this, it's ok for me! ;)

<table border="0" cellpadding="0" cellspacing="0" width="600">
  <tr>
    <td><a href="http://www.anzie.com/"><img style="display:block;" src="https://d2q0qd5iz04n9u.cloudfront.net/_ssl/proxy.php/http/gallery.mailchimp.com/5513172da1aa95c4b84fdedba/images/ESSETIAL6_FALL_01.jpg" height="179" width="600" alt="Gold Rush" border="0" /></a></td>
  </tr>
  <tr>
    <td><a href="http://www.anzie.com/viewall_gold.php" target="_blank"><img border="0" alt="Shop Gold" height="25" src="https://d2q0qd5iz04n9u.cloudfront.net/_ssl/proxy.php/http/gallery.mailchimp.com/5513172da1aa95c4b84fdedba/images/ESSETIAL6_FALL_02.1.jpg" style="display:block;" width="600" /></a></td>
  </tr>
</table>

Upvotes: 1

Teena Thomas
Teena Thomas

Reputation: 5239

try removing the width='600px' from the <td>, so that it would take the width of the img

Upvotes: 0

Related Questions