Blank email messages in outlook.com, microsoft exchange, and hotmail.com

After styling an email and testing it, everything seemed to work fine except in Outlook.com, Microsoft Exchange, and Hotmail. For some reason, Exchange strips all the code used (tables, tr & td tags) no matter what I do. Is there a workaround for this issue, or is it simply not possible? I have utilized CSS in my <style> tag. Should I switch to inline styling, or is there another solution?

In addition, my email uses specific values (shortcodes) from a form, which functions correctly in all other email clients except Outlook. If direct coding is not feasible, is there any alternative approach?

In short, how can I utilize code in my HTML email if Microsoft Exchange breaks all code, resulting in a blank email? You can view the entire email on my test site.

Here is the code for my email:

<style> 
td {
    text-decoration: none;
    color: #78797a;
    width: 420px;
    line-height: 22px;
    border: 1px solid black;
    }
    
img {
     display:block;
    }
    
h3  {
        text-decoration: none;
        color: #434343;
    }
h4  {
        text-decoration: none;
        color: #434343;
    }
-webkit-text-size-adjust: none;
</style>

<table style="font-size: 15px; font-family: 'Open Sans', sans-serif; font-weight: 200;">
<img src="http://www.belife.nl/wp-content/uploads/2015/06/belife-RGB.jpg" align="top"><br>

<h4>Referring Physician</h4>
<tr style="padding: 10px">
  <td> Name</td><td> [name_ref]</td>
</tr>

<tr style="padding: 10px">
  <td> Initials</td> <td>[initials_ref]</td>
</tr>

<tr style="padding: 10px">
    <td> Gender</td> <td>[gender_ref]</td>
</tr>

<tr style="padding: 10px">
    <td> Referrer Function:</td> <td>[function_ref]</td>
</tr>

 <tr style="padding: 10px">
    <td> Organization Name:</td> <td>[organization_ref]</td>
</tr>

... // More table rows

</table>

Shortcodes like [email_ref] are inputted through a form and must be included in the email.

Any advice or solutions would be greatly appreciated. Thank you!

EDIT * Although I was able to resolve the issues with Outlook myself, now Hotmail displays empty content for some reason, showing plain code instead. Could this be due to the inline code formatting? *

Answer №1

Thanks to @tvgemert's article, I was able to resolve the issue with Outlook after some research.

<!DOCTYPE html>
<html>
<head></head>
<body>
    <table style="font-size: 15px; font-family: 'Open Sans', sans-serif; font-weight: 200;">
<img src="http://www.belife.nl/wp-content/uploads/2015/06/belife-RGB.jpg" align="top" style="display: block;"><br><h3 style="text-decoration: none; color: #434343;">With this letter, I am referring the client below to you for a program of medical specialist rehabilitation care (MSR) at BeLife.</h3>

    <h4 style="text-decoration: none; color: #434343;">Referring physician</h4>
    <tr style="padding: 10px;">
<td style="text-decoration: none; color: #78797a; width: 420px; line-height: 22px; border: 1px solid black;"> Name</td>
<td style="text-decoration: none; color: #78797a; width: 420px; line-height: 22px; border: 1px solid black;"> [name_ref]</td>
    </tr>
<tr style="padding: 10px;">
<td style="text-decoration: none; color: #78797a; width: 420px; line-height: 22px; border: 1px solid black;"> Initials</td> <td style="text-decoration: none; color: #78797a; width: 420px; line-height: 22px; border: 1px solid black;">[initials_ref]</td>
    </tr>
<tr style="padding: 10px;">
<td style="text-decoration: none; color: #78797a; width: 420px; line-height: 22px; border: 1px solid black;"> Gender</td> <td style="text-decoration: none; color: #78797a; width: 420px; line-height: 22px; border: 1px solid black;">[gender_ref]</td>
    </tr>
</table>

By incorporating inline code, the email display issue in Outlook is now resolved.

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

Scrolling does not function properly on Android devices when utilizing skrollr.js in conjunction with multiple div elements containing the id "skrollr-body."

Having trouble with the scroll functionality in my skrollr.js animations. Everything works fine on desktop, but when I checked the rendered HTML in the browser console, I noticed that there are two divs with the same id "skrollr-body". One is empty and the ...

How can external webpages be effectively integrated under a banner for a cohesive user experience?

Google Images serves as a prime example. Upon clicking on an image, a persistent frame appears at the top of the page, prompting users to easily navigate back to Google. Is there a specific term for this method and what would be the most effective approach ...

Removing the final BR elements from a div using jQuery

Does anyone know how to remove only the last <BR> tag within a div using jQuery? The code I tried ends up removing all <BR> tags in the div instead of just the last one. HTML Code <div class="topic"> Lorem ipsum dolor sit amet, consect ...

What is the best approach to transfer information from the client side to a node

I have an ejs page that looks like this: <%- include('../blocks/header', {bot, user, path}) %> <div class="row" style="min-width: 400px;"> <div class="col" style="min-width: 400px;"> <div class="card text-white mb-3" & ...

unable to modify background color when mouse hovers in CSS

Recently, I implemented this code to style the navigation bar on my website. However, I encountered an issue where the color does not change when hovering over the links. .nav { list-style-type:none; margin:0; padding:0; overflow:hidden; } ...

Issue with JS jQuery: The click event on an li element within an expanded ul does not function properly

I have built a basic webpage to explore jQuery. However, there is an issue that arises when I click on the "Button: another one." It seems to interfere with the event of clicking on the li element, causing it to glitch and not respond. Here is the code: JS ...

How can I create a DIV element that consistently shows text when clicked?

Is there a way to achieve this effect using just CSS and HTML? When clicking on the question text, it should reveal the answer below, and clicking again should hide the answer. I have managed to make it work with hover, but I am unsure how to implement it ...

The navigation bar toggle fails to collapse once it has been expanded

Hello, I am facing an issue with my navbar as it will not collapse once expanded. I would greatly appreciate it if someone could review my code and provide me with some advice. <nav class="navbar navbar-expand-lg navbar-light bg-light border-bott ...

Best approach for routing using express

My current project involves using Express to develop a small website. Here is the code snippet I am working with: var package_express = require('express'); var app = package_express(); app.get("/", function(req, res){ res.sendFile(__dirname ...

Retrieve all HTML dependencies, such as JavaScript and CSS files, using the same method as a web browser

I am currently working on a Single Page Application (SPA). My main objective is to evaluate the performance of the application using . Given that the application is an SPA, I want to simulate a scenario where all static content is loaded when a user firs ...

Having Trouble Uploading an Image through WordPress Media Upload

I am currently facing an issue with uploading an image to my WordPress site. The image I am trying to upload is 5.6 MB in size with a resolution of 1920px x 1444px. Previously, I had successfully uploaded a smaller image (0.5MB / 939px x 471px) without any ...

Combining Material UI's Higher Order Components (HOCs) for Maximum Efficiency

Currently in the process of combining multiple Material UI components for rendering. The code I have so far is: export default connect(mapStateToProps, mapDispatchToProps)(withTheme()(withStyles(styles)(ShopStore))); This setup is functioning as expected. ...

another option besides the nextElementSibling

I have a unique code that applies a style to the following div when another div is clicked, using nextElementSibling. var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("clic ...

Issue with Bootstrap DIV not extending to full height when applying background-color

I have encountered numerous posts on this topic, but none of the solutions provided have worked for me. I must admit that I struggle to grasp CSS concepts, although I am making an effort to learn. Here is the code I am currently using: <!DOCTYPE html& ...

In need of a solution for the blank space issue in my HTML/CSS slideshow. How can I

I am experiencing an issue with my slideshow where there is a blank area on the right side. I have tried several solutions but haven't had much success resolving it. Any suggestions would be greatly appreciated. Thank you! Link to image JSFiddle lin ...

The VARCHAR data type in MySQL does not support the inclusion of any alphabetic characters

I am currently working on setting up a MySQL database table and need to insert some values into it using PHP from a webpage. I have managed to achieve this, but I am running into an issue where I can only insert integer values into the table. I have tried ...

Steps for rearranging the order of CSS grid layout

Could you assist me in implementing a grid layout that fulfills these specific criteria? I'm unsure of how to proceed, so any guidance would be greatly appreciated. https://i.sstatic.net/vBtXc.png When there are more than 9 items, the current layout ...

Inquiries regarding jQuery's functionality and efficiency

I was wondering about the best way to improve performance? Would it be more efficient to have two images written in HTML, one visible and one hidden, and then use jQuery to toggle their display (hiding the visible one and showing the hidden one)? <img ...

Is the SVG onload event firing too soon?

Looking at my code using jQuery-svg, here is what I have: function replaceRaster(){ $('#png').remove() a = $('#graphic') b = a.svg(a) a.load('IDC_Energy.svg', {onLoad:bind} ) svg = document.getElem ...

What is the best way to position this container in the center of the

Is there a way to perfectly center this container both vertically and horizontally? I've attempted the method below without success. Unsure of what is missing: HTML: <div class="box"> <p>This is a sentence.</p> </div> C ...