Outlook's limited width is causing images to exceed the boundaries of the HTML email

I have a collection of images that display perfectly in Gmail, but when viewed in Outlook, all five images appear within a single <tr> and cause the table width to expand.

My desired layout is to have the first four images centered on the first line, with any additional images wrapping to a new line while still within the same <tr>. I have attempted this configuration, which looks fine in Gmail, but it stretches out in Outlook. I have researched articles on this issue without much success.

Any assistance in resolving this problem would be greatly appreciated.

Thank you.

<table width="600" cellspacing="0" cellpadding="0" border="0" style="  background: #fa4b00;margin: 0 auto !important; padding: 0px; max-width:600px !important; line-height: 100% !important; border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt; text-align: center;" >


                    <tr>
                        <td height="20"></td>
                    </tr>

                    <tr>

                        <td style="vertical-align:top;width:20%;display:inline-block;margin-left:20px;padding:0;text-align:center;">
                            <img style=" outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455301580.jpeg" border="0" height="120" width="120" >
                            <p style=" width: 100%; text-align:center; font-size:10px;word-break: normal; text-transform: uppercase; max-width: 110px; padding: 0px 5px; margin: 0 auto; color: #ffffff; font-weight: 600; ">XYZ</p>
                            <p style=" width: 100%; text-align:center; font-size:8px;word-break: normal;  text-transform: uppercase; max-width: 110px; padding:0px 5px; padding-right: 5px; margin: 0 auto; color: white; "> XYZ </p>
                        </td>


                        <td style="vertical-align:top;width:20%;display:inline-block;margin-left:20px;padding:0;text-align:center;">
                            <img style=" outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455949782.jpeg" border="0" height="120" width="120" >
                            <p style=" width: 100%; text-align:center;  font-size:10px;word-break: normal ; text-transform: uppercase; max-width: 110px; padding: 0px 5px; margin: 0 auto; color: #ffffff; font-weight: 600;">XYZ</p>
                            <p style=" width: 100%; text-align:center; font-size:8px; word-break: normal ; text-transform: uppercase; max-width: 110px; padding:0px 5px; padding-right: 5px; margin: 0 auto; color: #FFFFFF;"> XYZ </p>

                        </td>


                        <td style="vertical-align:top;width:20%;display:inline-block;margin-left:20px;padding:0;text-align:center;">

                            <img style=" outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455627060.jpeg" border="0" height="120" width="120" >
                            <p style=" width: 100%; text-align:center; font-size:10px;word-break: normal; text-transform: uppercase; max-width: 110px; padding: 0px 5px; margin: 0 auto; color: #ffffff; font-weight: 600;">XYZ</p>
                            <p style=" width: 100%; text-align:center; font-size:8px;word-break: normal;  text-transform: uppercase; max-width: 110px; padding:0px 5px; padding-right: 5px; margin: 0 auto; color: #FFFFFF;">XYZ  </p>
                        </td>


                        <td style="vertical-align:top;width:20%;display:inline-block;margin-left:20px;padding:0;text-align:center;">
                            <img style=" outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455300140.jpeg" border="0" height="120" width="120" >
                            <p style=" width: 100%; text-align:center; font-size:10px;word-break:normal; text-transform: uppercase; max-width: 110px; padding: 0px 5px; margin: 0 auto; color: #ffffff; font-weight: 600;">XYZ</p>
                            <p style=" width: 100%; text-align:center; font-size:8px;word-break: normal;  text-transform: uppercase; max-width: 110px; padding:0px 5px; padding-right: 5px; margin: 0 auto; color: #FFFFFF;"> XYZ </p>

                            <p style="padding-bottom: 30px;"></p>

                        </td>



                        <td style="vertical-align:top;width:20%;display:inline-block;margin-left:20px;padding:0;text-align:center;">
                            <img style=" outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;" alt="" src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455300140.jpeg" border="0" height="120" width="120" >
                            <p style=" width: 100%; text-align:center; font-size:10px;word-break:normal; text-transform: uppercase; max-width: 110px; padding: 0px 5px; margin: 0 auto; color: #ffffff; font-weight: 600;">XYZ</p>
                            <p style=" width: 100%; text-align:center; font-size:8px;word-break: normal;  text-transform: uppercase; max-width: 110px; padding:0px 5px; padding-right: 5px; margin: 0 auto; color: #FFFFFF;"> XYZ </p>

                            <p style="padding-bottom: 30px;"></p>

                        </td>
</tr>
  </table>

htmlcsshtml-table

Answer №1

Instead of setting the TDs to display:inline-block, consider the fact that a table element is designed to behave like a table cell.

The issue may arise if you are using an Outlook app or any other email client with a different rendering engine than Chrome. This could cause the rendering engine to ignore the display:inline-block property on table cells.

To ensure reliability, try removing the table elements and wrap each image in a DIV instead.

Check out this jsFiddle link for reference.

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

Steps to implementing a function just before a form is submitted

Imagine a scenario where you have the following HTML form: <form action="myurl.com" method="post" id="myForm"> <input type="number" name="number" class="numberInput"> <input type="number" name="number"> <input type="submit ...

javascripthtmlforms

Bring JavaScript Function into Vue's index.html File

Recently in my code files, I noticed the following: function example() { console.log("testing"); } In another file, I have something like this: <head> <script src="../src/example.js" type="text/babel"></sc ...

javascripthtmlvue.js

Issue with Bootstrap 4 navigation tabs: dropdown items do not cycle through active tab panels

Whenever I utilize nav-tabs to toggle between tabpanels, it functions properly. However, there seems to be an issue when attempting to switch the active tabpanel using the links in the dropdown menu. Below is the HTML for my nav-tabs and dropdown menu, alo ...

htmlbootstrap-4

Exploring the functionalities of scss and minified files within Visual Studio 2017

I have very little knowledge of scss. In our Visual Studio 2017 solution explorer, there is a .scss file called Theme6.scss. When I expand it, I see a file named Theme6.css. Upon expanding that file, two more files are revealed: Theme6.css.map and Theme6. ...

csssass

Ways to activate auto completion without using a string

Can anyone assist us with the tinymce editor? We have implemented an auto completion feature using a plugin from TinyMCE's documentation, but we are having trouble changing the triggering behavior. Currently, it only suggests options when "@" is typed ...

javascripthtmltypescripttinymcetinymce-5

Invalid argument type and beyond acceptable range: file:///c:/Tools/MYScript.hta

My task involves creating a script to query an MSSQL database and display its content. However, I keep encountering the error message stating Argument wrong type and that it is out of acceptable range. Can someone please assist me with this issue? Below i ...

htmlsql-servervbscript

Prevent the wrapping of elements in an expanded hover state

Check out the Latest Demo: https://fiddle.jshell.net/Benihana77/cjtg5ojf/ The Scenario: I have designed a versatile promo where the main text and the button/link text can vary in length. The button/link is placed inline, with an extended arrow that expan ...

css

Conceal a division using CSS based on its data-role attribute

After extensive research, I have yet to find a solution. Let's say there is a div structured like this: div[data-role="form-footer"] What would be the most effective method for hiding it, and can it be done using CSS? I've tried the f ...

htmljquerycss

A guide to sending epoch time data to a backend API using the owl-date-module in Angular

I have integrated the owl-date-time module into my application to collect date-time parameters in two separate fields. However, I am encountering an issue where the value is being returned in a list format with an extra null value in the payload. Additiona ...

htmlangulartypescriptepoch

Ways to create a group label to modify various textboxes when a click event occurs

Is it possible to change multiple textboxes with corresponding labels after a click event? Issue: The current output only displays the value of the last textbox. $(function () { $('a.edit').on('click', function (e) { e.pre ...

javascriptjqueryhtml

The issue of undefined database columns arises when attempting to transmit data from an HTML form to a MySQL database via Express

My primary objective is to develop a RestAPI using Node.js and test it in a small HTML application. With the guidance of my instructor, I successfully created the RestAPI based on an example and customized it to work with my own MySQL database. Testing ea ...

javascripthtmlnode.jsrestexpress

What is the method for formatting within the <textarea> element?

While working on developing a comment system, I recently made the discovery that text areas cannot be formatted to retain paragraphs, line breaks, etc. This was particularly noticeable when comparing sites like StackOverflow, which uses a text editor inste ...

javascripthtmlforms

Is your React application struggling to display large images when bundled with Webpack?

I am facing an issue while trying to display an image from my image folder in a React project using Webpack. I have observed that smaller photos with physically smaller dimensions and file sizes load properly, but larger photos do not render on the screen, ...

javascripthtmlcssreactjswebpack

Passing label id as a parameter in ng-init in AngularJS

I am currently learning AngularJS and working on a project that involves fetching label names from a database. The challenge I am facing is how to pass a label id as a parameter and retrieve the corresponding label name. Ideally, I would like this process ...

htmlangularjs

Tips for extracting title and image from someone else's blog posts to share on your own website

Currently, I am in the process of creating a website where I can showcase my personally curated content. I have been struggling to figure out how to seamlessly integrate this content into my site without relying on an API. My initial idea was to manually ...

javascriptjqueryhtml

Spinning triangle around central point using CSS

I'm working on a project that includes the following code snippet: body { background-color: #312a50; font-family: Helvetica Neue; color: white; } html, body { height: 100%; } .main { height: 100%; width: 100%; display: table; } .wr ...

htmlcss

Exploring the wonders of CSS with Socialchef

Hey, I recently came across a solution on Stack Overflow where they provided code for SocialChef to convert decimal inputs into fractions. I'm wondering how I can write or incorporate some code to input fractions and mantissa as a fraction... I ...

phpcss

Utilizing jquery for displaying and hiding notifications - Notyfy in action

Recently, I've started working with jQuery and have come across the useful Notyfy jQuery plugin. My goal is to display a notification bar with specific messages based on certain conditions such as success or error. I'm trying to achieve somethin ...

jquerycssnoty

CSS: Specify child element to have a full width of 100%, but appear only 50% wide

Looking at this page, it seems that the header photo is not displaying full width. #wrap { width: 990px; } #content-wrap { display: flex; } .image-header { display: block; width: 100%; } .image-header img { width: 100%; height: auto; } .cont ...

cssflexbox

JavaFX Animation for Charting

My FXML file contains a JavaFX AreaChart <AreaChart id="myAreaChart" onMouseClicked="#handleAreaChartMouseClicked" GridPane.columnIndex="0" GridPane.rowIndex="0" fx:id="myAreaChart" > <xAxis> <Nu ...

javacssanimationchartsjavafx