Incorporate the HTML CTA on top of the background image within the email template

In my email template, I am trying to place an HTML CTA over a background image. The code works perfectly on all email clients including mobile and desktop, except for Outlook where the alignment of the CTA copy is off. Below is the code snippet along with a screenshot for reference:

 <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
 
  <tr>
   <td bgcolor="#FFFDFB" style="padding:0 0px 0px 0px;">
    <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
     
      <tr>
       <td align="center" background="https://image.e.iqos.com/lib/fe3915707564067f721579/m/1/fc4a7ecd-84fe-4a84-8b3a-41e0cdb7d157.png" class="mobile-hero" height="200px" style="background-repeat:no-repeat; background-size:100% auto;" valign="top" width="100%">
        <!--[if gte mso 9]>
                <img src="https://image.e.iqos.com/lib/fe3915707564067f721579/m/1/fc4a7ecd-84fe-4a84-8b3a-41e0cdb7d157.png" height="200" width="640" alt="" border="0" style="display: inline-block;" />                
                <v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="false" stroke="false" style="position:relative;top:0;left:0;width:640px;height:200px;">
                <v:textbox inset="0,0,0,0">
                <![endif]--><table border="0" cellpadding="0" cellspacing="0">
         
          <tr>
             <td class="mobile-hide">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        </td>
           <td align="center" class="mobile-position" style="width: 100%; padding: 110px 10px 0px 0px;" valign="middle" width="100%">
            <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
             
              <tr>
               <!--[if gte mso 9]>       
           <td style="padding: 0 22px 0px 0px; valign="top" align="center">
            <table align="center" cellspacing="0" cellpadding="0" border="0">              
               <tr>
                     <![endif]--><td align="center" valign="top">
                <div>
                 <!--[if mso 12 | mso 14]> 
          <v:roundrect xmlns_v="urn:schemas-microsoft-com:vml" xmlns_w="urn:schemas-microsoft-com:office:word" href="#"  alias="CTA"  style="position:relative; top:1180px; left: 220px; height:52px;v-text-anchor:middle;width:160px;color:#ffffff;" arcsize="50%" strokecolor="#000001" fillcolor="#ffffff" class="darkmode_white" >
            <w:anchorlock/>
            <center style="color:#000001;font-family:'Neue Plak SemiBold', Arial, sans-serif; font-size:16px; line-height:20px; "><strong>%%voucher_code%%</strong></center>
          </v:roundrect>
        <![endif]--><!--[if gte mso 15]>  
          <v:roundrect xmlns_v="urn:schemas-microsoft-com:vml" xmlns_w="urn:schemas-microsoft-com:office:word" href="#"  alias="CTA"  style="position:relative;  top:100px; left: 240px; height:52px;v-text-anchor:middle;width:160px;color:#ffffff;" arcsize="50%" strokecolor="#000001" fillcolor="#ffffff" class="darkmode_white" >
            <w:anchorlock/>

            <center style="color:#000001;font-family:'Neue Plak SemiBold', Arial, sans-serif; font-size:16px; line-height:20px; "><strong>%%voucher_code%%</strong></center>

          </v:roundrect>
        <![endif]--><a alias="CTA" class="darkmode_white darkmode_black_background darkmode_border_white mobile-position-cta" href="#" style="background-color:#ffffff;border:2px solid #ffffff;border-radius:50px;color:#000001;display:inline-block;font-family:'Neue Plak SemiBold', Arial, sans-serif; font-size:16px; line-height:21px; text-align:center;text-decoration:none;width:160px;-webkit-text-size-adjust:none;mso-hide:all;padding: 10px 19px 14px 19px;" target="_blank"><strong>%%voucher_code%%</strong></a></div></td><!--[if gte mso 9]>    
  </tr>
              </table>
            </td>
   <![endif]--></tr></table></td>
          <td class="mobile-hide">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        </td>
         </tr></table><!--[if gte mso 15]>                 </v:textbox>                 </v:rect>                 <![endif]--><!--[if mso 12 | mso 14]>                 </v:textbox>                 </v:rect>                 <![endif]--></td></tr></table></td></tr></table>

View image here

cssoutlookhtml-emailhtml-renderingvml

Answer №1

The current height is set to 52px while the line-height is only at 20px. To match the height, adjust the line-height to 52px as well since it's all on one line.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I clear all jQuery toggled classes that have been added across the entire webpage in an Angular project?

Upon clicking a link within an element, the following CSS is applied: <a class="vehicleinfo avai-vehicle-info-anc-tag" ng-click="vehicleInfo($event)">Vehicle Info <span class="s-icon red-down-arrow"> </span> </a> $scope.vehic ...

javascriptjqueryhtmlcssangularjs

The size of the website elements needs to be increased for better visibility on mobile devices

While developing the official website for my Discord bot - Idle Baker, I opted to utilize Bootstrap 5 for its user-friendly design features, making it easier than dealing with extensive CSS coding. After completing the homepage of the site, I encountered ...

htmlcssmobile-websitebootstrap-5

Why does a React error keep popping up when trying to set a background-image in my CSS?

I've been working on my React project and I can't figure out why I keep encountering this error. I double-checked the URL paths and made sure they were named correctly, yet the error persists. Here is a snippet of my CSS: background-image: url ...

javascripthtmlcssreactjs

The placement of the floating element completely messes up the

Whenever I try to float an element in my magnificent popup, the layout gets all messed up. You can see for yourself by trying to put the image and text next to each other using "float: left": http://jsfiddle.net/a7Vj8/1/ Every time I attempt to float th ...

htmlcss

Using Sass to Loop through Specific Items

Currently, I am in the process of developing a SASS loop to iterate over a series of images (let's say 50). My goal is to increment the transition delay by 50ms for every nth-of-type image. However, it appears that the current for loop I have implemen ...

cssfor-loopsass

Navigation drop-down extending beyond the boundaries of the screen

On the right side of react-bootstrap's Navbar, there is a Dropdown menu: <Nav className="container-fluid justify-content-end"> <NavDropdown alignRight title="Dropdown" flip> <NavDropdown.Item href="#action ...

cssreact-bootstrapbootstrap-5

What are the most effective strategies for creating cross-platform components using Vue.js 2.0?

In my current project, I am looking to create a universal component library using Vue.js 2.0 that can be seamlessly integrated across various platforms. The focus of this query lies in establishing the most effective styling practices for components. Typi ...

cssangularjsreactjsresponsive-designvue.js

Tips for creating a gradual fade-out effect on a bootstrap modal window

One issue I'm facing is with my modal dialog (#busyIndicator). It simply displays a message that reads "Please Wait". Sometimes, the operation it's tied to completes so quickly that the visual transition between showing and hiding the dialog beco ...

javascriptjqueryhtmlcsstwitter-bootstrap

Reducing the amount of text displayed on ion-text to a minimum

HTML: <ion-list *ngFor="let message of messages"> <ion-item lines="none" type="button" button="true"> <ion-grid> <ion-row> <ion-col class="message"> <ion-text> ...

htmlcssangulartypescriptionic-framework

Adjusting Chart.js line graph alignment to the left

I'm curious about why my chart is not aligned to the left and how I can fix this issue. Here is the code snippet I am working with: var data = { labels: ["ID"] , datasets: [ { label: "Sensor 1" , data: [{ ...

javascripthtmlcsschart.js

Header media query in CSS3 not functioning as expected

Currently, I have two separate style sheets for mobile and desktop versions. My intention is to default to the mobile style sheet. Upon examining my header, I have included the following: <link rel='stylesheet' media='all' href=&ap ...

cssmobileresponsive-designmedia-queries

Steps for embedding a dynamic 3D model onto a website with THREE.js

Seeking guidance on integrating animated 3D models onto a webpage using THREE.js. Currently, I have successfully loaded a static 3D model named 'aaa.gltf' with auto rotation and orbit control functionality. However, when trying to load another an ...

javascripthtmlcssthree.js3d

Troubles with Bootstrap's column functionality causing issues

Trying to create a menu using Bootstrap, but experiencing issues with the 'col' class not working correctly. Here is the sample HTML code provided: <div class="logo col"> <a href="index.html"><img src="C ...

htmlcssmenubootstrap-5

div maintain aspect ratio while scaling

My current layout is structured like this: HTML <div id="container"> <div id="zoomBox"> <div class="box"></div> <div class="box"></div> <div class= ...

javascriptjqueryhtmlcssinternet-explorer

What is the best way to ensure that my transitionend event is triggered?

I'm currently exploring the <progress> element and attempting to incorporate a CSS transition to achieve a smooth progress bar effect as its value increases. Despite my efforts, I can't seem to trigger JS after the transitionend event occur ...

javascripthtmljquerycsscss-transitions

Error encountered when trying to show a modal using a PHP script

I'm encountering an issue with the modal system on my website. Let me share some code snippets: MODALS ARE BUILT WITH W3.CSS LIBRARY modal.js (including debug statements) let modal = null; let title = null; let content = null; $(document).ready(() = ...

javascriptphphtmljquerycss

What is the best way to eliminate the gap between header, content, and footer sections when in mobile view?

This issue seems to only occur in mobile mode, where the blueviolet line is coming from the background color. https://i.stack.imgur.com/VBhIp.png link to the image body { background-color: blueviolet; } header, main, footer { background-color: #ff ...

htmlcss

PHP: Issues with displaying data from a SELECT * FROM query in tables

My goal is to style tables pulled from my database so that the columns in the rows align with the column names for better readability. I attempted to use PHP to achieve this by creating a table outside a while loop to display the names and then starting t ...

phphtmlcss

How do you determine the dimensions of a background image?

My div is a perfect square, measuring 200 pixels by 200 pixels. The background image I've chosen to use is larger at 500 pixels by 500 pixels. I'm searching for a method to ensure that the entire background image fits neatly within the confines ...

htmlcssbackground

Ways to make the background color white in Bootstrap 5

Can someone assist me in changing the background color of my portfolio to white? I attempted to use global CSS, but the black background on both sides of the page is preventing the change. return ( <> <Navbar /> <main className= ...

javascriptcssbackground-colorbootstrap-5mainclass