Outlook email rendering problem with HTML template

I'm having trouble with my HTML-Email template not displaying correctly in Outlook.

When viewed in Gmail:

https://i.sstatic.net/L8CYl.png

But when viewed in Outlook desktop:

https://i.sstatic.net/yONWP.png

<table align="center" border="0" cellspacing="0" cellpadding="0" style="width: 90%;border-collapse: collapse;align-content: center;">
  <tr>
    <td style=" background-color: #ececec; display: block; border-bottom: 2px solid #ccc; padding: 5px; text-align: center;vertical-align: middle;"></td>
    <td id="title" style="background-color: #ececec; display: table-cell;width: 40%; padding: 0px; text-align: center; font-size: 15px; font-weight: bold; vertical-align: middle;">SHOP WITH CONFIDENCE</td>
    <td style=" background-color: #ececec; display: block;border-bottom: 2px solid #ccc;padding: 5px;"></td>
  </tr>
</table>

Can anyone advise on how to make it look the same in Gmail and Outlook?

htmlcssoutlookhtml-emailemail-templates

Answer №1

To create a 2-row table layout, it is best to avoid using the rowspan attribute as it may not render correctly in Outlook. Instead, you can place suitable content inside the table cells and remove unnecessary styling. For example, there is no need to apply display: block followed by display: table-cell, simply stick with the default styling.

Remember to use &nbsp to prevent table cell collapse when adding content. Additionally, consider moving any background color styles from individual cells to the entire table for consistency.

I have provided an updated table structure below:

<table align="center" border="0" cellspacing="0" cellpadding="0" style="width: 90%;border-collapse: collapse;align-content: center; background-color: #ececec;">
  <tr>
    <td>
      <table style="width: 100%">
        <tr>
          <td style="border-bottom: 2px solid #ccc;">&nbsp</td>
        </tr>
        <tr>
          <td>&nbsp</td>
        </tr>
      </table>
    </td>
    <td id="title" style="width: 40%; text-align: center; font-size: 15px; font-weight: bold; vertical-align: middle;">SHOP WITH CONFIDENCE</td>
    <td>
      <table style="width: 100%;">
        <tr>
          <td style="border-bottom: 2px solid #ccc;">&nbsp</td>
        </tr>
        <tr>
          <td>&nbsp</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

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

Custom Internet Explorer Stylesheet

My webpage (specifically a game) is behaving differently on Internet Explorer compared to other browsers, despite my efforts to fix it through online searches. <!--[if IE ]> <link rel="stylesheet" type"text/css" href="iestyle.css"> <![endif ...

htmlcss

Creating a three-row CSS layout where the middle row aligns to the right side

I am working on developing a mobile device layout with 3 blocks. The first and third blocks contain text fields, while the second block is filled with a map. However, all of my blocks don't look good when they are too wide. The browser window can have ...

javascripthtmlcss

How about: "Insert a line break inside a div element"

My goal is to have 3 icons positioned side by side that will float left if the window shrinks. Under each icon, I plan to include some text. Below you can see that I've made progress on this layout. .icons { BORDER-TOP: black 1px solid; HEIGHT: 10 ...

htmlcss

Express.js problem: Unable to load CSS and JS files from the 'public' directory

Currently, I am working on a web project with Express.js and encountering difficulties in loading CSS and JavaScript files from the 'public' folder. Despite following common practices, it seems that something is amiss. Here is the layout of my pr ...

javascripthtmlcssexpressweb

Getting an input value dynamically in a React variable when there is a change in the input field

I am having an issue with my search text box. I need to extract the value onchange and send a request to an API, but when I try using the normal event.target method, it shows an error. How can I fix this? The problem is that onchange, I need to call a func ...

javascripthtmlreactjs

Make sure all the table rows have the same height to completely fill the table regardless of the number of rows

Looking for a solution to create a table with a fixed height of 280px, whether it has 3 or 4 rows. Is there a method to adjust the row heights based on the number of rows in the table, so that they fill up the table's height? To clarify, when the ta ...

htmlcss

Trigger a div to transform upon hover among multiple divs sharing the same class

I have encountered an issue with multiple divs having the same class. I've written a JavaScript code to adjust certain CSS properties on hover, but the problem is that when I hover over one box, all others with the same id and class are also affected. ...

javascripthtmlcss

Dealing with a Bootstrap 4 fixed-top navbar issue: Uncovering the mystery behind the white space

I'm encountering an issue with the navbar that is causing a white space: see screenshot. Here is the HTML code I am using: <div class="header"> <div class="overlay"></div> <nav class="navbar fi ...

htmlcssbootstrap-4

Text transitions in a gentle fade effect, appearing and disappearing with each change

I want to create a smooth fade in and out effect for the text within a div when it changes or hides. After researching on Google and Stack Overflow, I found that most solutions involve adding a 'hide' CSS class and toggling it with a custom func ...

javascriptcss

I am looking to dynamically generate HTML elements using AngularJS based on data from a JSON file

Although there are existing answers to this question, I have a specific approach that I need help with. I've already made progress but could use some guidance. This is my Controller : angular.module('dynamicForm.home-ctrl',[]) .con ...

javascriptjqueryhtmlangularjsjson

After switching over to Angular 6 from Angular 5, it's been noticed that the Bootstrap button styles are lacking proper

We recently completed an upgrade from Angular 5 to Angular 6. The problem: After the upgrade, we noticed that Bootstrap button styles no longer have any margin spacing between them. Current Bootstrap Version: 3.3.7 For instance, if you have the followin ...

cssangulartwitter-bootstrapbuttonupgrade

Acquire HTML information using the Robot framework and xpath techniques

My first task is to visit the website www.google.de. I aim to extract the word Deutschland from this section of the HTML code: <div class="logo-subtext">Deutschland</div> Since the id in this div class is not available, I must utilize xpath. ...

htmlseleniumxpathrobotframework

Creating an HTML layout that consists of three image elements placed over a single background image with each image

In my HTML code, I am utilizing multiple div elements. Each div is designated to hold an image with dimensions of 1600*750. Within each div, there is a fixed image that repeats across all the divs by using a specified class. Here are the details for each f ...

htmlcss

Cannot adjust Span content with JQuery

I am currently utilizing Bootstrap and JQuery for my project. HTML <div> <ul> <li><strong> Status : </strong><span id="monitorStatusSpan">1111</span></li> </ul> </div&g ...

javascriptjqueryhtmltwitter-bootstrap

Arrange a jQuery table by a column containing version details

I'm working with a table that includes a column for version numbers. The challenge is that even though 1.1 and 1.10 are different versions, they are treated the same as numbers. So, in order to properly sort them, I need to separate the numbers on eit ...

jqueryhtmlsorting

Is there a way to utilize JavaScript or jQuery to set the "focus" on a specific div element?

When I mention focus, I'm not just talking about scrolling to a particular section of the page. Is there a method to make the browser act as if the user had actually clicked on that specific div? The scenario in question involves wanting a user to be ...

javascriptjqueryhtml

Strategies for aligning a div element in the middle of the screen

Positioned in the center of the current viewport, above all other elements. Compatible across different browsers without relying on third-party plugins, etc. Can be achieved using CSS or JavaScript UPDATE: I attempted to use Javascript's Sys.UI.Dom ...

javascriptcss

Tips for combining multiple lists into a dropdown menu based on selected checkboxes

Imagine a scenario where there are 5 checkboxes, each with a unique value mapped to a specific list of elements. In my particular case, I have an associative PHP array as shown below: [100] => Array ( [0] => Array ( [name] => NameABC [sid] => ...

phpjavascriptjqueryhtmlajax

The tab element is not receiving a click event in Protractor

This is the complete HTML code for the Tab section. <tab heading="Meta Data" id="heading_meta-data"> <div id="meta-data" class="row"> <div class="col-md-3 col-xs-3"> ...

javascripthtmlangularjsseleniumprotractor

Refreshing pane content within Kendo UI Splitview

I am utilizing the Kendo UI splitview. In my setup, I have configured one pane on the left for navigation and another pane on the right for content display. The left pane contains 4 navigation links structured as follows: <div data-role="pane" id="si ...

javascriptjqueryhtmlkendo-ui