Community Forum

Over the years we have built up a community of email marketers, coders and designers that live and breathe email.

Use the Email on Acid Forum like your virtual water cooler: Stop by to discuss email code, quirky clients and fixes and post your issues (with an example of the code) for our community to offer its assistance.

 
   
Rendering horizontal white space between images

qdesign

Newbie
Total Posts:  1
Posted: 14 July 2017 04:27 PM

I’m working on an html email template that renders great in Gmail, Safari and older Outlook but not in newer Outlook. It also renders perfectly in browsers. The issue is that there are horizontal white spaces showing up between images.

screen shot of broken img here https://i.stack.imgur.com/mLL4H.jpg

<table border="0" cellpadding="0" cellspacing="0" height="130" width="600" style="-webkit-text-size-adjust: none !important;">
<
tbody>
    <
tr>
        <
td style="border-collapse: collapse; -webkit-text-size-adjust: none !important;"><img alt="" height="32" src="http://info.advisorshares.com/l/33702/2017-07-14/944scx/33702/216147/MASTER_HEADER_editable_01.jpg" style="width: 37px; height: 32px; vertical-align: middle; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; display:block;" width="37" /></td>
        <
td style="border-collapse: collapse; -webkit-text-size-adjust: none !important;"><img alt="" height="32" src="http://info.advisorshares.com/l/33702/2017-07-14/944scz/33702/216149/MASTER_HEADER_editable_02.jpg" style="width: 265px; height: 32px; vertical-align: middle; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; display:block;" width="265" /></td>
        <
td style="border-collapse: collapse; -webkit-text-size-adjust: none !important;"><img alt="" height="32" src="http://info.advisorshares.com/l/33702/2017-07-14/944sd2/33702/216151/MASTER_HEADER_editable_03.jpg" style="width: 298px; height: 32px; vertical-align: middle; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; display:block;" width="298" /></td>
    </
tr>
    <
tr>
        <
td style="border-collapse: collapse; -webkit-text-size-adjust: none !important;"><img alt="" height="68" src="http://info.advisorshares.com/l/33702/2017-07-14/944sd8/33702/216157/MASTER_HEADER_editable_04.jpg" style="width: 37px; height: 68px; vertical-align: middle; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; display:block;" width="37" /></td>
        <
td style="border-collapse: collapse; -webkit-text-size-adjust: none !important;"><!--EDITABLE TAB BEGINS //-->
        
<table border="0" cellpadding="0" cellspacing="0" width="265" style="-webkit-text-size-adjust: none !important;">
            <
tbody style="border-collapse: collapse;">
                <
tr style="border-collapse: collapse; margin: 0px; padding: 0px;">
                    <
td align="center" style="border-collapse: collapse; -webkit-text-size-adjust: none !important; margin: 0px; padding: 0px;" valign="bottom">
                    <
h1 style="font-family: 'Arial Black'; font-size: 50px; font-style: normal; font-variant: normal; line-height: 50px; color: #F47735; margin: 0px; padding: 0px;">FLRT</h1>
                    </
td>
                </
tr>
                <
tr>
                    <
td align="center" style="border-collapse: collapse; -webkit-text-size-adjust: none !important; margin: 0px; padding: 0px;" valign="bottom">
                    <
h2 style="font-family: 'Arial Narrow'; font-size: 11px; font-style: normal; font-variant: normal; font-weight: 600; line-height: 13px; margin: 0px; padding: 0px 0px 5px;">AdvisorShares Pacific Asset Enhanced Floating Rate ETF</h2>
                    </
td>
                </
tr>
            </
tbody>
        </
table>
        <!--
EDITABLE TAB ENDS //--></td>
        
<td style="border-collapse: collapse; -webkit-text-size-adjust: none !important;"><img alt="" height="68" src="http://info.advisorshares.com/l/33702/2017-07-14/944sd6/33702/216153/MASTER_HEADER_editable_06.jpg" style="width: 298px; height: 68px; vertical-align: middle; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; display:block;" width="298" /></td>
    </
tr>
    <
tr>
        <
td style="border-collapse: collapse; -webkit-text-size-adjust: none !important;"><img alt="" height="30" src="http://info.advisorshares.com/l/33702/2017-07-14/944sd4/33702/216155/MASTER_HEADER_editable_07.jpg" style="width: 37px; height: 30px; vertical-align: middle; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; display:block;" width="37" /></td>
        <
td style="border-collapse: collapse; -webkit-text-size-adjust: none !important;"><img alt="" height="30" src="http://info.advisorshares.com/l/33702/2017-07-14/944sdd/33702/216159/MASTER_HEADER_editable_08.jpg" style="width: 265px; height: 30px; vertical-align: middle; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; display:block;" width="265" /></td>
        <
td style="border-collapse: collapse; -webkit-text-size-adjust: none !important;"><img alt="" height="30" src="http://info.advisorshares.com/l/33702/2017-07-14/944sdb/33702/216161/MASTER_HEADER_editable_09.jpg" style="width: 298px; height: 30px; vertical-align: middle; outline: none; text-decoration: none; -ms-interpolation-mode: bicubic; display:block;" width="298" /></td>
    </
tr>
</
tbody

 

mykel7

Newbie
Total Posts:  2
Posted: 16 July 2017 12:41 AM
[ # 1 ]

your total height is 261px, the declaration on your table is 130px.

img height = 32px
editable image = 68px
text FLRT line-height = 50px
line-height = 13px
editable_06.jpg = 68px
img height 30px