CODEWITHSUNDEEP
cssoutlookhtml-emailemail-templates
cmccarra
cmccarra

Reputation: 309

CSS button out of place over background image in HTML email template in Outlook

I am creating an email template with a background image and text/CTA button on top of the image. I am using bulletproof backgrounds for the background image and the buttons outputted from the beefree.io editor for the CTA button. Both render fine together in all clients apart from Outlook 2010. I can get the CSS button to render perfectly when the background is just a colour and vice versa, when the button is just an image. When I put the two together it renders the following:

How the templates renders in Outlook with both image background and CSS button

And this is how it should render:

enter image description here

The CSS button is showing up, just in the wrong position. Does anyone have any suggestions on where I am going wrong in my code?

https://codeshare.io/zr0Bj (code for background image starts around line 192)

Thanks Connor

Upvotes: 2

Views: 4623

Answers (3)

Nathan
Nathan

Reputation: 5269

I had the same issue and only way around it was to put the VML for the button (<v:roundrect ...>) after the closing of the other VML. That way it's not nested (Outlook doesn't like nested VML, it appears, and doesn't really seem to know what to do with <v:group> which otherwise seemed promising.)

I.e. do you code for the background image, as well as the button for everything other than Outlook (with mso-hide:all), and then end all of that.

Just before the </td> that closes the code for the background-image, add your <v:roundrect> code, and add this to the style attribute: position:absolute;top:300px;left:200px;" -- you'll need to adjust the top and left as per your situation. This probably needs <v:image> to have style="position:absolute" as well.

As this is 5 years after the fact, I won't provide a specific answer, but posting here for future reference.

My generic example in full:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"  xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
  <head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <!--[if !mso]><!-->
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <!--<![endif]-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title></title>
  <!--[if (gte mso 9)|(IE)]>
  <style type="text/css">
  table {border-collapse: collapse !important;}
  </style>
  <![endif]-->
  <!--[if gte mso 9]><xml>
  <o:OfficeDocumentSettings>
    <o:AllowPNG/>
    <o:PixelsPerInch>96</o:PixelsPerInch>
  </o:OfficeDocumentSettings>
</xml><![endif]-->
</head>
    <body style="margin:0;padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;min-width:100%;background-color:#F6F6F6;">
    <center id="wrapper" style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;background-color:#F6F6F6">
        <div style="max-width:600px;">
            <!--[if (gte mso 9)|(IE)]>
            <table width="600" align="center" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;color:#333333;" >
            <tr>
            <td style="padding-top:0;padding-bottom:0;padding-right:0;padding-left:0;border-collapse:collapse;" >
            <![endif]-->
            <table align="center" style="border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;border-spacing:0;font-family:Arial, sans-serif;font-size:14px;color:#111826;margin:0 auto;width:100%;max-width:600px;">
                <tr>
                                    <td class="bodyPadding" width="100%" style="padding:30px 40px;">
                                        <p style="margin:0 0 15px 0;font-size:23px;line-height: 26px;"><strong>xyz</strong></p>
                                    </td>
                                </tr>
<tr>
                        <!-- START BACKGROUND --><td bgcolor="#27313D" background="https://via.placeholder.com/600x255" width="600" height="255" valign="top" style="background-image: url('https://via.placeholder.com/600x255');background-repeat: no-repeat;background-position: center;background-size: cover;background-color:#27313D;width:100%;height:auto;padding:0;">
                        <!--[if mso]>

                        <v:image xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block; width: 450pt; height: 191pt;" src="https://via.placeholder.com/600x255" />                <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style=" border: 0;display: inline-block;position: absolute; width: 450pt; height:191pt;">
                        <v:fill  opacity="0%" color="#27313D"  />
                        <v:textbox inset="0,0,0,0">
                        <![endif]-->
                        <div>
                            <table role="presentation" width="100%" style="width:100%;font-size:16px;color:#ffffff;font-family:Arial, sans-serif;" cellpadding="0" cellspacing="0" border="0">
                                <tr>
                                    <td class="bodyPadding" width="100%" style="padding:30px 40px;">
                                        <p style="margin:0 0 15px 0;font-size:23px;line-height: 26px;"><strong>xyz</strong></p>
                                        <p style="margin:0 0 15px 0;line-height: 24px">We're exploring the weird and wonderful ways you can boost your wellness. If you're eligible, you can discover more reasons to be good to yourself with Live Better.</p>
                                        <!-- START BUTTON (NON-OUTLOOK) --><div>
                                            <a href="https://www.google.com.au" style="background-color:#2e92e9;border:none;border-radius:50px;color:#ffffff;display:inline-block;font-family:lft-etica, Arial, sans-serif;font-size:16px;font-weight:bold;line-height:50px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;mso-hide:all;">Find out more</a>
                                        </div>  
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <!--[if mso]>
                        </v:textbox>
                        </v:fill>
                        </v:rect>
                        </v:image>
                        <!-- START BUTTON (OUTLOOK)--><v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" href="https://www.google.com.au" style="height:50px;width:200px;position:absolute;top:185px;left:40px;" arcsize="100%"  fillcolor="#2e92e9" stroke="false">
                        <center style="color:#ffffff;font-family:Arial, sans-serif;font-size:16px;font-weight:bold;">Find out more</center>
                        </v:roundrect>
                        <![endif]-->
                        </td>
                    </tr>
            </table>
        </div>
    </center>
</body>
</html>

Upvotes: 0

Alex Barber
Alex Barber

Reputation: 61

The reason you are having problems is most likely due to the containing VML object of the "bulletproof" options using:

<v:textbox>

A textbox in VML should only ever contain non-VML elements, i.e. you can;t put another shape in a text area for a shape.

<v:rect>
  <v:textbox>
    <v:roundrect>
    </v:roundrect>
  </v:textbox>
</v:rect>

This is a very rough representation of what you currently have, which using the logic above is considered invalid.

What you could do is instead have a VML image holding your background image that sits behind the HTML area containing your content and button.

<table width="640" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td style="position:relative;">
      <!--[if gte mso 9]>
      <v:image src="...yourbackgroundimage.jpg" style="position:absolute;top:0;left:0;z-index:-1;"
      <![endif]-->
      <table cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td>
            your content here, including your VML button
          </td>
        </tr>
      </table
    </td>
  </tr>
</table>

There are some serious inflexibility to this method, however it is pretty much the only way of layering VML objects without getting into all the fuss of using

<v:group>

Just be aware that when using negative z-index on a VML element and using a background colour on the body of your email the image will sit behind the background colour :|

Hope this helps.

edit:

just for reference on another point that was mentioned, stacking background images. If for what ever reason you had multiple .pngs you wanted to stack or say for instance place a roundel over a background image in which you wanted text overlayed on that. You can add multiple images ot that top stack:

<table width="640" cellpadding="0" cellspacing="0" border="0">
  <tr>
    <td style="position:relative;">
      <!--[if gte mso 9]>
      <v:image src="...yourbackgroundimage.jpg" style="position:absolute;top:0;left:0;z-index:-1;" />
      <v:image src="...yourroundel.jpg" style="position:absolute;top:0;left:0;z-index:-2;" />
      <![endif]-->
      <table cellpadding="0" cellspacing="0" border="0">
        <tr>
          <td>
            your content here, including your VML button
          </td>
        </tr>
      </table
    </td>
  </tr>
</table>

Upvotes: 1

Gortonington
Gortonington

Reputation: 3587

Unfortunately you cannot use the bulletproof buttons on top of the bulletproof background image. instead of this, I would use the td and a tag button version for this button. (Email on Acid has a great article on it - https://www.emailonacid.com/blog/article/email-development/simple-code-based-bulletproof-button)

The reason these two 'bulletproof' techniques do not play nice is the VML (Vector Markup Language) that Outlook uses to mimic what other email clients do normally. The VML that Outlook accepts is limited (as is everything with Outlook...) and does not allow stacking well and so it breaks when you attempt to do this. The same goes for trying to place two 'bulletproof' background images on top of each other. It doesn't end pretty.

Upvotes: 2

Related Questions