HTML Email Not Displaying Properly in Outlook

My email is displaying correctly on webapps and browsers, but the layout is off on Outlook client version 2102 (build 13801.21106). I've tried adjusting cellspacing, cellpadding, and width, but nothing seems to work.

https://i.sstatic.net/HrRlE.png https://i.sstatic.net/Ufvqr.png

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

I've shared the HTML code in this fiddle https://jsfiddle.net/w0x7rpvq/ - look for the comment <!--issuehere-->

It appears fine in a browser https://i.sstatic.net/EF25s.png

Update 1

The alignment is not as expected (https://jsfiddle.net/7sn95eLz/)

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

htmlcssemailoutlookhtml-email

Answer №1

Your design is structured using a table with three cells per row. The issue arises in Outlook where the text appears narrow due to the first row containing only one cell matching the width of the image cell (190px). Unlike other browsers, Outlook on Windows does not recognize the display:block; property applied to the <table>, causing the text to be displayed in a narrow width.

To resolve this, add colspan="3" to the <td> element that holds the full-width text.

<!--issuehere-->
<td colspan="3" class="subtitle" valign="top" style="font-family: 'Open Sans', Arial, Helvetica, sans-serif; font-size: 16px; color: #333333; font-weight: normal; padding: 0 0 20px 0; background:red;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>

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

Internet Explorer 8 is completely disregarding CSS styling

Consider this CSS: .tbl-div > h1 { border-bottom: 1px solid black; display: block; font-size: 25px; margin: 10px -15px 30px -10px; padding: 0 0 0 40px; } .tbl-div > h1 > span { color: #006ec7; display: block; font ...

htmlcssiframe

Positioning a div absolutely within a targeted div

Is there a way to set a div as absolute within a specific relative div rather than just the parent? For instance, I have a div that's nested inside of a row. However, I would like it to be positioned absolutely in the section instead of the row. Both ...

htmlcsscss-position

How can JavaScript be used to deactivate an HTML form element?

Within this form, there are two selection buttons that require client-side validation. The user must choose one of them, and once a selection is made, the other button should automatically be disabled. Below is the script I have implemented: <html> ...

javascriptjqueryhtmldom

Adjust the positioning of the content within each card inside the modal box

I require assistance in adjusting the CSS for different cards within the modal box. I would like all cards to have consistent column width for various content within them, creating a symmetrical appearance. Currently, the cards appear staggered. Also, plea ...

htmlcssbootstrap-4

How to set a background image using JQuery Mobile

Struggling to apply a background image on my webpage due to JQuery Mobile CSS taking precedence over my own styling. Despite attempting the following solution, it remains unsuccessful. body { height: 100%; background-image: url('ProjectImages/log ...

jqueryhtmlcssmobile

Guide to adding a fixed page on WordPress

I currently have a WordPress installation on my hosting server. In addition, I have a static HTML page stored in its own folder along with some graphic files that I'd like to use as the main landing page for my website. I prefer not to include it as a ...

phphtmlwordpress.htaccess

Experimenting with jQuery in a .php file on a local server but experiencing issues with functionality

Currently, I am working on a login page that involves a specific functionality. When the user clicks on the "I'm a Student" button, I want to achieve a slideDown effect to hide one div and show another div with a slideUp effect. While I have confidenc ...

javascriptphpjqueryhtmlcss

Having difficulties rendering photos with django

I am currently in the process of building a blogging platform using the django framework and I have encountered a challenge with displaying images on dynamic pages. Below is the snippet of my code: models.py: class Post(models.Model): title = models.C ...

pythonhtmldjangodynamic

Display the navigation controls in the CSS Bootstrap Carousel only when hovering over the control section, rather than when hovering over the entire carousel

My carousel displays full page images, but I want the controllers to only appear when the mouse hovers over the specific area they are in, rather than appearing when the mouse is anywhere on the page. .carousel .carousel-control { visibility: hidden; ...

csstwitter-bootstrap

Searching for web elements using relative xpath in Java

I am currently attempting to navigate a table with the id of "campaignAllAvailableList" and cycle through a list of titles: (xpath = .//*[@id='campaignAllAvailableList']/li/div/div/h3) in order to check if it matches the desired one. If a match ...

javahtmlseleniumxpath

How can we use jQuery to extract an HTML element's external stylesheet and add it to its "style" attribute?

My goal is to extract all CSS references from an external stylesheet, such as <link rel="stylesheet" href="css/General.css">, and add them to the existing styling of each HTML element on my page (converting all CSS to inline). The reason for this re ...

javascriptjqueryhtmlcss

fixed width div with width proportion

experts. I'm currently experimenting with a spinning cube effect for my gallery and I recently came across Paul Hayes' experimental cube on his website (it's best viewed in Google Chrome). However, I am facing a challenge in getting it to w ...

csshtml3d

Refreshing Django HTML table dynamically upon database updates

Currently, I have an HTML table set up using a Django template to showcase data from my database. I am looking to ensure that this table remains updated in real-time whenever the database undergoes changes. Despite my research efforts, there is limited inf ...

htmlajaxdjangodatabaseweb-applications

Invoke a C# function (returning a string) within ASP.NET to set the source attribute for an HTML element

I have developed some C# Methods that return a string output, such as "C:/tracks/audio1.mp3", and I want to use this as a reference for my ASP.NET project. Now, I am trying to incorporate my method "GetTrackPath()" into the HTML audio tag so that the meth ...

javascriptc#htmlasp.netrazor

Here's a simple script to display a div or popup only once in the browser using plain vanilla JavaScript

// JavaScript Document I'm attempting to make a popup appear in the browser only once. I believe using local storage is the key, but all I can find are solutions involving jQuery. I really want to achieve this using plain JavaScript without relying ...

javascripthtml

Creating a grid cell that spans the entire grid width

Snippet of CSS Code: .wrapper { display: grid; position: relative; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 25vh; width: 100%; } .prova { border: 1px solid; } .wrapper div:nth-child(2) { grid-column: 3; grid-row: 2 / 4; ...

htmlcssgrid

The issue of bidirectional binding not functioning properly has been identified in AngularJS version 1.x

I have a directive that I want to make accessible across multiple pages. The requirement is that when any key is held down, the password should be displayed. The password details are passed from the controller and need to be updated in the directive. For ...

javascripthtmlangularjsangularjs-directive

Inject CSS styles into panelgrid on-the-fly

How can I pass a color code property fetched from ebean to a css function? <h:panelGrid id="testpanel" columns="#{message.no_of_columns}" rows="#{message.no_of_rows}" styleClass="dynamicGrid"> <c:forEach items="#{bLDashBoar ...

cssjsf

Nested divs with overlapping background images

How can I incorporate background images in nested divs? <div id="templatemo_content" style="padding: 30px 30px 0 0; background: #fff url(images/foot_bg.png) no-repeat 0 bottom; z-index:10"> This particular div displays a grey-colored background imag ...

phphtmlcss

Items in a pair of distinct columns

I want to enhance a picture by adding three paragraphs on the left-hand side. Below is my HTML code: <md-toolbar layout-align="center center"> <h3>Traffic Light Component</h3> </md-toolbar> <md-grid-list md-cols ...

htmlcssangularjs