Issue with email layout formatting in Outlook 2013 on Windows 7

I have made some modifications to an email template originally designed by Campaign Monitor. The template is responsive and functions well on most email clients.

However, I am facing formatting issues with the email header specifically on Outlook 2013 when running on Windows 7.

I have tried adjusting the formatting both inline and using CSS, but so far no luck in finding a solution.

Desired Email Format:

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

Issue on Outlook 2013, Windows 7:

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

I have created a JSFiddle link for you to review the HTML code: https://jsfiddle.net/jeremyccrane/wz4Ly555/

    <!--[if mso]>
<body class="mso">
  <![endif]-->
  <!--[if !mso]><!-->
  <body class="half-padding" style="margin: 0;padding: 0;min-width: 100%;background-color: #E7E7E7;">
    <!--<![endif]-->
    <center class="wrapper" style="display: table;table-layout: fixed;width: 100%;min-width: 620px;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;background-color: #E7E7E7;">
      <table class="header centered" style="border-collapse: collapse;border-spacing: 0;Margin-left: auto;Margin-right: auto; width: 600px;">
        <tbody>
          <tr>
            <td style="padding: 0;vertical-align: top;">
              <table class="one-col" style="border-collapse: collapse;border-spacing: 0;Margin-left: auto;Margin-right: auto;width: 600px;background-color: #ffffff;table-layout: fixed;" emb-background-style>
                <tbody>
                  <tr>
                    <td class="column" style="padding: 0;vertical-align: top;">
                      <table class="contents" style="border-collapse: collapse;border-spacing: 0;table-layout: fixed;width: 100%; background:#EE3524;">
                        <tbody>
                          <tr>
                            <td class="remove-padding" style="padding: 0;vertical-align: top;padding-left: 0px;padding-right: 0px;word-break: break-word;word-wrap: break-word;">
                              <div class="image" style="font-style: normal;font-weight: 400;Margin-bottom: 0;Margin-top: 0;font-family: sans-serif;color: #000;" align="center">
                                <img style="border: 0;-ms-interpolation-mode: bicubic;display: block;" src="https://www.dropbox.com/s/bif26pxsl39mv5u/HEADER.png?raw=1" class="" width="600px"/>
                              </div>
                            </td>
                          </tr>
                        </tbody>
                      </table>
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
        </tbody>
      </table>
    </center>
</body>
</html>
htmlcssemailoutlook

Answer №1

https://i.sstatic.net/XqoTy.jpg

After running the html code from the jsfiddle through Litmus, it appears to be functioning correctly.

Could you provide more detailed instructions on how to attain the two highlighted red sections?

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

Generating JSON output from an object stored within an array using Pug (Jade) template engine

Displaying JSON data from an object within an array. Utilizing Pug (Jade). I've attempted the following: h1.main-title.center Changelog each log in changelog .changelog-item .second-title span= log['ver'] ...

htmlarraysjsonobjectpug

Exploring the World of 2D Array Animation

I'm in the process of creating a Pacman ghost using visual 2D arrays. I would like the ghost to move similar to this: https://i.sstatic.net/KPmUt.gif I am considering implementing CSS transitions for the movement, but I'm unsure about how to do ...

javascriptcssarrays

Displaying MySQL data on an HTML page with Node.js

Hello there, I recently started delving into Node.js for the first time. My current project involves fetching data from MySQL and displaying it on my HTML page. However, when I try to access my website at http://localhost:3000/index.html, I encounter an er ...

javascripthtmlmysqlnode.js

When using a CSS background image in ReactJS, a white space may appear at the bottom of the window

Currently, I am working on creating a background for a React website and implementing it in the div above component. My purpose is to have this background only appear on specific components and not throughout the entire website. However, I am encountering ...

cssreactjsbackground-imageresponsive-images

An anomaly where a mysterious symbol appears in front of every dollar sign in an HTML document

I have a code written in AngularJS to display the amount in dollars. However, there is an unwanted " Â " character appearing before every " $ " character in the HTML. I am looking for a way to remove this character. Your help is greatly appreciated. Thank ...

javascriptangularjshtml

Tips for incorporating user-entered data from a text box into a JavaScript function and utilizing a loop

Although my code is functioning correctly, I am looking to make some adjustments but seem to be struggling to achieve the desired outcome. Essentially, I have two labels and an input field in which the user is prompted to enter a specific number of weeks ...

javascripthtml

Having multiple jQuery animations running concurrently can lead to choppy transitions on a webpage

Here's a snippet of code that I'm working with: <hgroup id="ticker"> <div> <h1>First <span>Div</span></h1> <h2>This is the First Div</h2> <h6>This is the First Heading</h6> </div ...

javascriptjqueryhtmlanimation

Encountering a problem with the mouseup event

Hey there, I've got this code up and running smoothly but I'm looking to make a tweak. Is there a way to have the script halt on the mouse up event? Currently, it displays coordinates as you drag over an image, but I'd like it to only show ...

javascriptjqueryhtmlcsssvg

Switching the background image when hovering over a list element

Looking at the screenshot, it's clear that there is an unordered list with a background image set on the div. What I am trying to achieve is to have the background image change whenever I hover over a list item. Each list item should trigger a differe ...

javascriptjqueryhtmlcss

Exploring the World of Html

I'm struggling with an HTML problem related to a web programming class I'm taking. The assignment involves creating a video game using HTML and JavaScript, where an image moves randomly on the screen and the player must click on it as many times ...

javascripthtmlcss

display a list of items in the dashboard using Angular 2 md-sidenav when clicked

I've successfully implemented a sidebar navigation menu in Angular 2, resembling the image shown in the link below: https://i.sstatic.net/KFvJQ.jpg UPDATE: However, I'm facing an issue where clicking on a category link within the sidebar doesn ...

htmlnode.jsangularangular2-routing

Adjusting the width of a nested iframe within two div containers

I am trying to dynamically change the width of a structure using JavaScript. Here is the current setup: <div id="HTMLGroupBox742928" class="HTMLGroupBox" style="width:1366px"> <div style="width:800px;"> <iframe id="notReliable_C ...

javascriptjqueryhtmliframewidth

Having trouble with Django when attempting to move a portion of a string to a new line

When a user signs up in my Django project and makes a mistake, an error message is sent to the template for display. I've noticed that some of my error messages are too long and need to be displayed on multiple lines within the text. I tried adding &b ...

pythonhtmldjango

Discover the power of EXCEL by utilizing a function that can determine if a set of columns is filled with data or empty

Currently utilizing Excel, I am looking for a function that can determine the year based on whether certain cells in the corresponding row are filled or empty. Essentially, when I enter an 'x' in a cell next to a date, I want to identify the visi ...

htmlexcel

Is it possible to modify the inner text of the body element without changing the surrounding HTML tags?

In my script, I have the following line : var ReplacingScope = document.querySelector( "body" ); let Regexp = new RegExp("fdp", 'gi'); ReplacingScope.innerText = ReplacingScope.innerText.replace( Regexp,"pdf"); While this successfully replaces ...

javascripthtml

Mouseover feature for image is functioning, but having issues with alignment

I am currently working on displaying images upon mouse over actions. While the functionality is working perfectly, I am facing an issue where the displayed images appear below and the last image takes up space at the bottom. To rectify this problem, I woul ...

javascripthtmlcss

The slice() function is displaying the correct output in the console, but the string is not being updated in the <td>

I am facing an issue where the console displays the expected substring, but the original string in the HTML remains unchanged. The goal is to truncate any long text within each table <td>. It's important to note that I'm specifically avoi ...

javascripthtmlangularjsbootstrap-4

"Enhance text formatting by making it stand out when hovered over

I am encountering an issue where the hover action for a specific letter begins before the mouse actually touches the text. In this case, I want the letter 'P' in 'Paul' to turn white when hovered over. The image illustrates the distanc ...

csshoverhighlight

Picture leading to the expansion of a table cell's height

I despise CSS more than anything. My table header with multiple inline table cells was working flawlessly until I attempted to add an image to one of the cells, causing the div's height to inexplicably expand. Here's an example of the blank tab ...

htmlcss

Stop all other players except the one that is currently active. Utilize a jQuery audio plugin designed for the <audio> HTML element

I am currently using a plugin that styles the HTML5 <audio> element and provides flash fallback for browsers that do not support the .mp3 file format. However, I have run into an issue where if you start playing one song and then click play on anothe ...

javascriptjqueryhtml