0

I am struggling with this piece of code. I have created this header which basically consist of a table with 2 rows and this what am trying to do:

  1. The shadow (bottom part of cid:img-headerbg) has to be at the bottom (how to change cid:img-headerbg to apply on table?)
  2. How to remove this gap, so that yellow line is at bottom? enter image description here

This is my header:

    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="background-color: {{accent_color}};">
        <tr>
            <td background="cid:img-headerbg" bgcolor="{{accent_color}}" valign="bottom" style="background-color:{{accent_color}};background-image: url('cid:img-headerbg');background-size:100% 100%; background-repeat:repeat-x; background-position: top left;">
                <!--[if gte mso 9]>
                <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
                  <v:fill type="frame" size="100%,100%" src="cid:img-headerbg" color="#eb847b" />
                  <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
                <![endif]-->
                <div style="max-width: 680px; margin: 0 auto;">
                    <!--[if mso]>
                    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="680" align="center">
                    <tr>
                    <td>
                    <![endif]-->
                    <table style="border:0;border-collapse:collapse;margin:0 auto;padding:0" align="center" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td height="30">
                                &nbsp;
                            </td>
                        </tr>
                        <tr>
                            <td style="margin:0 auto;padding:0;text-align:center;" align="center" width="100%">
                                <a href="{{base_url}}" style="display: block; top: 0; outline: medium none; text-align: center; text-decoration: none; margin:0 auto;" align="center">
                                    <img alt="{{company_name}}" label="{{company_name}}" src="cid:img-logo" style="border: 0px; display: block; max-width: 100%; max-height: 100%; margin:0 auto;" />
                                </a>
                            </td>
                        </tr>
                        <tr>
                            <td style="color:#ffffff;font-family:'Roboto','Open Sans','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:20px;font-weight:400;line-height:25px;margin:0 auto;padding:15px 0;text-align:center;text-decoration:none" align="center" width="100%">
                                {{header_title}}<br />
                                <small>{{header_subtitle}}</small>
                            </td>
                        </tr>
                    </table>
                    <!--[if mso]>
                    </td>
                    </tr>
                    </table>
                    <![endif]-->
                </div>
                <!--[if gte mso 9]>
                  </v:textbox>
                </v:rect>
                <![endif]-->
            </td>
        </tr>
        <tr>
            <td background="cid:img-colour_stripe" bgcolor="{{primary_color}}" valign="bottom" style="background-color:{{primary_color}};background-image: url('cid:img-colour_stripe');background-size:100% 2px;background-repeat:repeat-x; background-position: bottom left;">
                <!--[if gte mso 9]>
                <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
                                <v:fill type="frame" size="100%,2px" style="background-size:100% 2px;background-repeat:repeat-x; background-position: bottom left;" src="cid:img-colour_stripe" color="#eb847b" />
                                <v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
                              <![endif]-->
                <div style="max-width: 680px; margin: 0 auto;background-color: #ffffff;">
                    <!--[if mso]>
                    <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="680" align="center" bgcolor="#ffffff" style="margin: 0 auto;padding:0;">
                    <tr>
                    <td>
                    <![endif]-->
                    <table cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: 0 auto;">
                        <tr>
                            <td height="100%" valign="top" width="100%" style="padding: 10px 0; background-color: #ffffff;margin:0;"></td>
                        </tr>
                    </table>
                    <!--[if mso]>
                    </td>
                    </tr>
                    </table>
                    <![endif]-->
                </div>
                <!--[if gte mso 9]>
                  </v:textbox>
                </v:rect>
                <![endif]-->
            </td>
        </tr>
    </table>
4
  • Your image doesn't match the code. Doesn't make sense where the yellow line is in the code even.
    – Syfer
    Aug 19, 2018 at 9:31
  • Well its copy paste, so why it doesn’t match?
    – jhon dano
    Aug 19, 2018 at 9:32
  • Best of luck with that attitude, you need help so be a friendly in answering. Had to read a lot of time for this to make sense. User pixels for height and width. It will make you life easier.
    – Syfer
    Aug 19, 2018 at 9:40
  • i didnt mean no offense, sorry if it came across rude.
    – jhon dano
    Aug 19, 2018 at 21:28

1 Answer 1

0

Gladly due to some research on my own i found the fix which worked fine for me: Outlook apparently add empty paragraphs after vml shapes, which was causing the gap. I fix this by adding font-size: 0 and line-height: 0 to the parent container.

https://litmus.com/community/discussions/538-vml-outlook-07-10-13-unwanted-20px-padding-at-the-bottom

1
  • Dont use 100% height and width in VML. It will cause issues, its in the link you pasted above as well. I never faced this as I use absolute height and width
    – Syfer
    Aug 23, 2018 at 23:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.