Troubleshooting problem with div width in Outlook causing table cell padding issue for curved corners on another div

This question has significantly evolved following additional testing

I am using a table layout similar to this:

<table>
  <tr>
    <td></td>
    <td style="padding:10px 3%;">
      <div border="2px solid #000000;">
          <table><tr><td style="padding:10px 7%;">Text 'n' stuff</td></tr></table>
      </div>
    </td>
    <td></td>
  </tr>
</table>

However, the div with a border is being clipped on the right. It seems that the div spans the width of the inner table along with an extra 14% for total padding, causing the border to extend slightly and then be truncated.

https://i.stack.imgur.com/OiG36.png

When I remove the nested table-tr-td inside the div but keep the content as is, the sizing issue is resolved. Alternatively, setting the td padding to zero fixes the width problem of the div. Unfortunately, I require the inner table for its padding. This inconsistency occurs in Outlook versions 2007, 2010, and 2013.

While I need the div for its rounded corner feature in other email clients, I'm seeking a solution without resorting to conditional statements.

Answer №1

There's always a solution hidden beneath every frustrating problem with MS technology. Uncertain whether it's good or bad, here's the workaround:

To address the div's border and radius, set them as desired, then negate them using the mso-border-*-alt properties:

overflow:hidden;border:2px solid #58bce9;border-radius:5px;mso-border-right-alt: none #FFFFFF 0;mso-border-bottom-alt: none #FFFFFF 0;mso-border-left-alt: none #FFFFFF 0;mso-border-top-alt: none #FFFFFF 0;

This effectively eliminates the div's problematic borders in Outlook. The overflow:hidden; is necessary to prevent the table's square corners' background color from interfering with the div's rounded corners.

Next, for the table, I utilized:

mso-border-right-alt: 2px solid #58bce9;mso-border-bottom-alt:2px solid #58bce9;mso-border-left-alt: 2px solid #58bce9;mso-border-top-alt:2px solid #58bce9;

These settings apply borders exclusively to the table in Outlook.

Voila!

Answer №2

Check out this helpful resource on email client CSS compatibility. Also, refer to the MSDN guide for outlook best practices.

I noticed that border-radius isn't supported by some Outlook clients like 7, 10, and 13. You might want to consider removing it to avoid formatting errors.

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

Display all elements on a webpage using Javascript without the need for scrolling

I'm looking for a way to ensure all items on a webpage load immediately, without having to scroll down multiple times before running a script to find a specific item. Is there a method to have all items load at once without the need to manually scroll ...

Tips for extracting text content that is not within an HTML element

Looking to extract data from this particular webpage: The information I'm interested in scraping includes Product Sku, Price, and List Price. I've successfully scraped the Price but I'm encountering issues with the other two, particularly t ...

Tips for organizing JSON data from a multiselect form

I am currently working on a template driven form with a multiselect field named assets. My framework of choice is semantic UI. <div ngModelGroup="assets"> <div class="field"> <label for="resourceName">Assets</label ...

Angular - Acquire reference to the <audio> element

Is there a way to access the methods of an audio tag within my component in order to implement play and pause functions based on click events? The current method I tried does not allow me to access the play() function. How can I correctly approach this? ...

Text positioned on the right side of the image, appearing to hover above

After finding a helpful example on Stack Overflow, I successfully implemented a similar layout for product boxes in a JSFiddle. I then replicated the CSS and HTML almost exactly on my Wordpress blog, but encountered an issue where the title, description, a ...

Error: The function jQuery(...).hexColorPicker does not exist

I am attempting to utilize a color-picker jQuery plugin. Below is a screenshot of the JavaScript file: https://i.stack.imgur.com/ovRjx.png Here is the code I am using to initialize it: <script type="text/javascript> jQuery(function(){ ...

Prevent textArea from reducing empty spaces

I am facing an issue with my TextEdit application set to Plain Text mode. When I copy and paste text from TextEdit into a textarea within an HTML form, the multiple spaces get shrunk. How can I prevent the textarea from altering the spacing in the text? T ...

Having trouble with centering my div in HTML and CSS

Coding Challenge .nav_bar { position: absolute; top: 0; width: 800px; height: 23px; display: inline-block; text-align: center; background-color: #0090bc; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; border: 2px solid #004D6F; -web ...

What steps can I take to update this HTML document and implement the DOM 2 Event Model?

I'm struggling with converting my document from the DOM 0 Event model to the DOM 2 Event model standards. I've tried getting help from different tutors on Chegg, but no one seems to have a solution for me. Hoping someone here can assist me!:) P. ...

A guide to activating tag selection within the DevExtreme tag box

I'm currently utilizing devExtereme within my Angular project. My goal is to enable the selection of text within tags in my tagbox component. Here's what I have implemented: <dx-tag-box [dataSource]="sourves" [value]="value&quo ...

Title appears to be left aligned instead of centered

My H1 is having trouble centering as I increase the font size. It positions correctly with a smaller size (30px), but when I increase the font, it becomes too low from the center even though text-align:center; is not helping to solve the issue. What adjust ...

Transfer or duplicate an SVG image from the bottom div to the top div

Is there a way to move a div from the chart_div to the movehere div? I've tried duplicating it below the current svg, but I'm having trouble targeting just the header row ('g' element) specifically. Here is the HTML: <script type= ...

The tooltip is obscured by the table row

I'm having trouble with a simple CSS fix and can't seem to figure out why. The z-index and overflow visibility properties are not working as expected. I just need 'In Progress' to be displayed above everything else. Some things I' ...

I'm having trouble getting rid of this stubborn loader on the website

I am currently utilizing the following template: . My objective is to eliminate the preloader progress bar that displays the loading progress of the page in percentage. The files associated with this preloader are as follows: Loader CSS File - www[dot]the ...

Mastering the Art of Tab Selection with Jquery

I am trying to implement a tabs control using jQuery. Here is the HTML code I have: <div id="tabs" class="news1"> <ul> <li><a href="#tabs-1">Track</a></li> <li><a href="#tabs-2">History&l ...

Is there a way to display a foundation.css drop-down menu using jQuery?

After attempting to create a navigation bar using foundation.css, I encountered an issue where the sub-menu does not appear when hovering over it with the mouse. The main question at hand is how to display the sub-menu of test on this specific webpage. D ...

Is there a way to prevent the slide-out bar from automatically hiding when selecting an item from its list?

I am facing an issue with my dashboard that has a slideout sidebar. Whenever I press the toggle button, the sidebar slides out as expected. However, when I click on any tab within the sidebar, it hides again. I only want it to hide when toggled. My code is ...

Custom styles for PrimeNG data tables

Struggling to style the header of a datatable in my Angular project using PrimeNG components. Despite trying various solutions, I am unable to override the existing styles. Even attempting to implement the solution from this PrimeNG CSS styling question o ...

Can you explain the contrast between the functions 'remove' and 'removeChild' in JavaScript?

I have recently coded an HTML page in order to gain a better understanding of how element removal functions. Code: <html> <head> <script> var childDiv = null; var parent1 = null; var parent2 = null; function ...

Adjust the path of an element as it decreases in size

Sorry for the weird title, but that's likely why I can't find the solution on my own. I'm experimenting with CSS animations and I want the form element to decrease in height from 100px -> 0, but I want it to collapse from the top to the ...