HTML Email Display Issue in Outlook

I created an email template that displays correctly in other email clients, but Outlook is distorting the inner div. I have specified a width of 920px for my inner div, but it's not taking effect in Outlook. I attempted this solution from Stack Overflow, but it didn't work.

Below is a snippet of my HTML email template:

<html>
   <body>
      <div style="width:950;margin:0px auto;">
         <img style="width:100%;" src="cid:header">
         <div style="background-color: #f3f3f3;width: 920px;padding: 15px 15px 20px 15px;margin: 0px;font-family: arial,sans-serif;font-size: 12.8px;box-sizing: border-box;color:#000;white-space:pre-line;" >
             Dear xyz
             <br><br>
             My mail body 
             <!-- Body might contain table  -->
             <br><br>
             support<br>
         </div>
         <a href='https://example.com'><img style="width:100%;" src="cid:footer"></a>
      </div>
   </body>
</html>

I have referred to a previous question and emailology, but so far, I haven't found a solution for the distorted inner div in Outlook.

If anyone has suggestions or solutions, please help me out!

Answer №1

When it comes to designing email templates, avoid using standard front-end development tools. Surprisingly, table-based layouts remain the most effective method for ensuring compatibility across email clients. In addition, keep in mind that email widths should ideally range between 600-800px.

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

Transform Angular Material Table selection color with selection

Is it possible to customize the color of the selector in an Angular Material table when using selection? Learn more about it https://i.sstatic.net/5ZJQT.png ...

Add a directive on the fly, establish a connection, and display it dynamically

Within my markup, I have a tag element called popup-window which is handled by a specific directive. If I wish to incorporate multiple similar widgets that can be displayed or hidden in various locations, I currently need to include all these elements dire ...

What is the advantage of parsing values in a switch statement compared to an if condition?

function checkInput() { let value = document.getElementById('test').value; if (value == 1) { console.log("It works with if statement"); } } function checkSwitch() { let value = document.getElementById('test').value; switc ...

Use $.AJAX to fetch a fragment of an HTML page and then insert the content into a <span> element

Here is the code I wrote using AJAX to retrieve a 2 line HTML page from a server... $.ajax({ type: 'GET', url: 'http://sc3.******/7.html', success: function(data) { var result1 = $( '<html />' ).h ...

a graphical representation of data organized in tabular form using

I am trying to develop a game where I need to generate a map using PHP. The goal is to create 100 table boxes in a specific pattern, but so far my attempts have not been successful... $field = 100; echo "<table border='3px' dir='ltr&apos ...

Integrating HTML elements based on scroll movement

Is there a way to dynamically add a new Bootstrap row to my HTML code when scrolling the mouse downward using JavaScript? <div class="row"> <div class="col-md-6 col-xs-6" > <div> <img src="img/picture1.jpg" a ...

Navigating to a specific page based on the selected option is the key to efficient web browsing

I'm currently working on a form development project and I'm looking for guidance on how to navigate to different pages based on the selection made in a radio button. Here's the current form setup with two radio buttons: .sh_k .sh_sl { ...

Using Angular to assign an object as the input value

I have an input field and I would like to assign a formControl to it that is an object in this format: { id:'123', name: 'Name' } However, I want the input field to display the "name" property of the object ...

Create a website that is both reorderable, flexible, and resizable

I want to create a similar design using jquery/html/css. Can anyone provide an article or explanation on how to get started making something like this? ...

Using jQuery to animate two images simultaneously in opposite directions

Trying to make two images animate using a single function. The issue is that one image needs to animate the left attribute while the other needs to animate the right. Here's what I have so far: $(document).ready(function(){ v ...

ErrorMessage: Found an unexpected character '{' while parsing the jQuery DataTables code

I've been attempting to incorporate the datatable library into my code, but I'm consistently encountering a SyntaxError: Unexpected token '{' in the javascript console. Even after searching for a solution online, it appears that my jav ...

Display the progress bar's completion percentage during animation

Creating a progress bar using HTML with the following structure: <div class="progressbar"><div class="text">%0 Completed</div> <div class="progressbar_inner"></div> </div> Implemented jQuery code fo ...

Seeking guidance on utilizing JavaScript for implementing an onclick event

I am exploring the realm of Event tracking with Google Analytics. To make this happen, I know that I must include an onclick attribute to select links (those specifically requested for tracking) in the following manner: <a href="http://www.example.com" ...

Incorporating .txt files into a static webpage using only HTML and JavaScript

Exploring the realm of web page creation for the first time has left me in need of some guidance. I have successfully added an upload feature for text files on my web page, but I am struggling to embed a text file directly into the page source. With Java s ...

What causes the e.preventDefault function to override all subsequent lines of code?

Placing the e.preventDefault() after the code allows it to work, but results in a page refresh. If I keep it at the beginning of the code, it prevents the other lines from executing and doesn't send the request. function loadPhoto(e){ e.prevent ...

Alter the background-color of the parent div when an input is checked using CSS

.chk-circle { width: 8px; height: 8px; background: #afb0b5; border-radius: 100%; position: relative; float: left; margin-top: 4px; margin-right: 8px; } .chk-circle label { display: block; wi ...

Tips on adjusting text size based on the browser window dimensions

There seems to be an issue with the text when the window size is decreased. It overlaps with the image instead of resizing accordingly. I have tried using media queries, VW, and VH units to adjust the text size based on the window size but it's not wo ...

What is the best way to adjust the volume vertically?

I successfully transformed my volume slider from horizontal to vertical using CSS. However, the functionality of the volume slider still behaves as if it were horizontal. In other words, I have to click horizontally to adjust the volume instead of vertical ...

Inject the variable into location.href

I am dealing with a dynamic URL, and I want to achieve the following in my HTML: <a onclick="location.href='myVariable';"><span>Click here</span></a> The issue is that this approach displays the actual string 'myVar ...

What strategies does Wired magazine use to create their unique thick underline link style?

Recently, I came across an interesting design choice on Wired magazine's website - they use a thick blue underline for their links that crosses over text descenders and is a different color from the text itself. You can see an example on this random p ...