When I send out HTML emails, I encounter an issue where the content takes up the full width no matter what. I have tried adjusting the width of table, tr, td, div, and body elements, but it still persists. This problem occurs on Outlook 2016 across all Windows 7, 8, and 10 versions. Is there a solution to fix the width of the email specifically for Outlook 2016?
For every email template, it is important to include a table with a width="100%" and style="margin:0 auto". This should be followed by a td element with style="width:600px;", as this is the most commonly used width for emails. After setting up these elements, you can proceed to add your content inside.
Below is a sample code snippet along with a link to view it in action on a JSFiddle.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--[if gtemso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width">
<style>
html, body {
font-family: 'Arial', sans-serif;
}
</style>
</head>
<body bgcolor="#fff" style="margin:0px; padding:0px; -webkit-text-size-adjust:none;"><!--[if gtemso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width"><!--[if gtemso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width">
<table bgcolor="#fff" border="0" cellpadding="0" cellspacing="0" height="100%" style="margin:0 auto;" width="100%">
<tbody>
<tr>
<td align="center" bgcolor="#fafafa" height="100%" width="600">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td bgcolor="white" height="50" style="height:50px;" width="600">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" height="50" style="height:50px;" valign="middle" width="600"><span style="font-size:12px;"><span style="font-family:Arial,Helvetica,sans-serif;"><a href="#" style="color:#000;">Some inline version</a></span></span></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td bgcolor="#FAB800" height="69" style="height:69px;" width="600">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" height="69" style="height:69px;" valign="middle" width="600"><img alt="" height="69" src="http://via.placeholder.com/600x69" style="display: block;" width="600" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td bgcolor="#fff" height="165" style="height:165px;" width="600">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" height="165" style="height:165px;" valign="middle" width="600">
<p style="width:90%; font-weight:bold; color:#9f836f; font-size:35px; line-height:1.15; font-family: 'Arial', sans-serif; ">Lorem<br>
<span style="color:#232323; font-size:22px; line-height:1.5; font-family: 'Arial', sans-serif; font-weight:normal;">Ipsum</span></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td bgcolor="#fff" height="413" style="height:413px;" width="600">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" height="413" style="height:413px;" valign="middle" width="600">
<img alt="" height="413" src="http://via.placeholder.com/600x413" style="display: block;" width="600" />
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I value your time and assistance. I have spent many hours trying to solve this issue but seem unable to reach a resolution. Here is the React component in question: import styles from './style.scss'; class ButtonComponent extends React.Compone ...
Hey there, I'm trying to figure out how to keep dropdown content from disappearing when using @mouseenter and @mouseleave. Here's what I have so far: <div class="wrapper"> <div class="link" @mouseenter="show = ...
My folder structure is as follows: Inside webapp/WEB-INF/some.jsp, I also have a javascript file located in the same directory at webapp/WEB-INF/js/myform.js. I referenced it in some.jsp like this: <script type="text/javascript" src="js/myform.js"> ...
https://i.stack.imgur.com/m8F9y.pngThe background-url() function was utilized to set the background screen to PurpleCloud.png. Despite multiple attempts, the image is still not being displayed. What could be the issue? Even after understanding file path w ...
Lately, I've dived into the world of Flask, MongoDB, and ElasticSearch. So far, my MongoDB and ElasticSearch setups are running smoothly. However, I've encountered an issue with generating a list of dictionaries and displaying them on my HTML we ...
I recently came across a discussion on separating PHP code and HTML at this link I find myself in a similar predicament. My current project involves designing a WordPress website with numerous sliders, animated dropdowns, forms, and other components. The ...
While browsing through w3schools, I came across the <main> element. However, according to caniuse.com, this element is not supported by IE, Opera Mini, and the UC Browser for Android. Should I opt for using a <main> element instead or stick wi ...
I am having an issue with my angular template. I have a div where I am attempting to load an HTML view file (.html) based on a $watch event, but for some reason, the HTML view is not being loaded into the div. Below is a snippet of my controller code that ...
I've created a basic template for my PHP website, but I'm struggling to find the best way to include my CSS and JavaScript files. Take a look at my index.php file below: <?php include'core/template.php'; $temp=new Template(); $sett ...
My current dilemma involves the zurb foundation framework, specifically with the .row class being set to a max-width of 61.25em, which is equivalent to 980px in width. The problem I am facing is that when I resize the browser and it reaches 1024px wide, t ...
I am looking to enhance my website with a sticky navbar positioned directly under the header, and I want it to stick to the top of the page as users scroll down. Additionally, I want the header to disappear smoothly as the user scrolls towards the navbar. ...
Here is the script I am working with: function upload_by_chunks() { var chunk_size = 1048576; // 1MB function slice(start, end) { if (file.slice) { return file.slice(start, end); } else if (file.webkitSlice) { ...
What causes Windows 7 users to view the VS Code website as unsafe? Visit the image link here ...
I have a friend who is currently working on developing a solution to convert aspx pages from html pages generated by an older asp application. The plan involves running the legacy app, capturing the html output, cleaning the html with a tool like HtmlTidy ...
Here is the HTML code that I am currently working with: <div class="item"> <div class="pageheader"> Header </div> <div class="info"> Created on... </div> <div class="image"> I ...
I encountered a peculiar issue that I have managed to work around, but I am still curious about why it is happening. Below is the code for my Composite class: import com.google.gwt.event.dom.client.ClickEvent; import com.google.gwt.event.dom.clie ...
I'm currently using Adobe Business Catalyst for my project. I've set up a web form with several fields, including three dynamic fields from "Web Apps." One of the fields is called "Select Location." Each location has an associated email address ...
When implementing the function below on an HTML page to show/hide more details about a comment, there is an issue where the page scrolls up to the top whenever the "read more" link is clicked. This can be frustrating as it takes the user away from the comm ...
The webpage index.jsp is responsible for retrieving images and text data from a database using Java code. Within the JavaScript file, I have included: $(document).ready(function(){ //When Document is Ready, Show the Main Page $("#showifjavaenable ...
I need help with my Angular component that includes an input date field. I am trying to figure out how to disable all past dates and also a specific range of future dates, such as those between 2023-10-15 and 2023-10-23. Is there a way to achieve this func ...