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

I am in search of a clean and efficient method to modify the class of a link that triggers an HTMX request in Django. Perhaps something like "auto-refresh" or a similar solution would be ideal

I've encountered an issue with HTMX in Django. The page consists of two main components: a list of categories and the content that is displayed when a category is clicked. Initially, everything was working smoothly with standard htmx functionality. H ...

Adding a vertical menu in PHP is a great way to enhance the

<ul id="verticalmenu"> <li><a href="http://www.yourlink.com/">Home</a></li> <li><a href="http://www.yourlink.com/">Vertical Menu</a></li> <li><a href="http://www.yourlink.com/">Dro ...

How to Implement Filtering in AngularJS ng-repeat

While developing my app, I came across a challenge with the filter in my ng-repeat. Initially, I could search by productCode or name. Then, a new requirement emerged - "Filter by SubcategoryId." The issue lies in filtering strictly by subCategoryId, while ...

Embedding PHP code within inline styles

Is it possible to incorporate a variable inside my progress bar? I want the progress to change based on the status of each project ($projek), but inserting the variable directly into the style attribute doesn't seem to be working. Here's the code ...

Improve the readability of text that is overflowing using CSS styling techniques

I am facing a problem with a table containing fixed-width content that doesn't always fit within the designated space. My goal is to truncate the text to a fixed width and add an ellipsis, while allowing the full text to be visible when hovering over ...

What is the best way to showcase my React App.js in an HTML document?

Is there a way to display my React app file (App.Js) within my Index.html file? <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="%PUBLIC_URL%/fav ...

Filter out all elements that come before the comma in the sorted array's output

Looking for a solution to modify my code so the output is just "Bothell" without the comma and count part. let As = document.getElementsByTagName('a'); let towns = new Map(); for(let a of As) { let town = a.textContent.split(',') ...

The content section sits discreetly behind the sidebar

Upon loading my Bootstrap 5 webpage, the toggle button successfully moves the navbar and body section to show or hide the full sidebar. However, an issue arises where the body section goes behind the sidebar when using the toggle button. Below is a portio ...

Adding a <span> element within an <h1> tag in WordPress

I am attempting to create this layout in Wordpress using the code <h1>This is my <span>title</span></h1>, but I am unsure how to incorporate a <span> tag within the <?php the_title(); ?> function. After consulting the c ...

I am looking to extract specific data from a webpage using Webscraping and page_soup.findAll, but I am unsure of the correct method to do

I'm currently working on a web scraping project and I'm trying to extract the keywords from a webpage. I attempted to use page_soup.findAll() for extraction, but I'm unsure of what to include between the parentheses to get the desired inform ...

Should the text underneath the image be placed above the rest of the images?

In the process of developing my game, I encountered a challenge where text needs to be dragged under specific images. To achieve this, I envision creating tabs below the images for the text to be dragged onto. My initial approach involved wrapping each im ...

Creating a scrolling list group in a single column that moves in sync with another longer column

When working with two columns in Bootstrap, such as col-4 and col-8, how can you ensure that a list-group stays fixed within its column and vertically aligned even when the content in the other column is scrolled down? Dealing with this responsively can b ...

What is the reason behind div elements shifting when hovering over a particular element?

Currently, I have floated all my div elements (icons) to the left and margin-lefted them to create space in between. I've displayed them inline as well. However, when I hover over one element (icon), the rest of the elements move. Can you please help ...

Manipulating checkboxes with Jquery

I have set up a scenario with two divs and two checkboxes. When the first checkbox is clicked, the first div will appear. Subsequently, if the second checkbox is clicked, the second div will appear below the first div. I initially styled both divs. Howev ...

Adjust the appearance of "FAQS" to show as "FAQs" in Lodash

I've integrated the lodash library - a powerful JavaScript utility tool - into my AngularJS project. <div ng-repeat="question in questions"> <label>{{question | startCase}}</label> </div> If you want to learn more about th ...

Tips for converting numerical values to visual elements in a JQUERY slider for images

I am looking to incorporate a similar image slider on my website, like the one showcased here: . However, I want the bottom content numbers to be replaced with smaller versions of the images in the slider instead. Does anyone have any suggestions on how I ...

Is there a way to obtain a comprehensive list of zip codes that are traversed by your route directions?

I have been searching through the Google Maps API (both Android and Web) but have not come across any references on how to retrieve a list of all the zip codes that are traversed by a given driving route. Could it be possible that I am missing something, ...

Dealing with reactive form controls using HTML select elements

I am working with a template that looks like this: <form [formGroup]="form"> <mdl-textfield type="text" #userFirstName name="lastName" label="{{'FIRSTNAME' | translate}}" pattern="[A-Z,a-zéè]*" error-msg ...

Difficulty in showcasing error on the website with JavaScript

I have recently developed a webpage that includes several input boxes and a submit button within a form as shown below: <form action="" method="post" name="password"> Upon clicking the submit button, a JavaScript function is triggered to validate i ...

Dynamic creation of HTML/Ionic checkbox leads to ng-change not binding properly

Recently, my team and I have been actively engaged in the process of handling an XML file and dynamically constructing a settings page based on the information extracted from it. Allow me to present an illustration of how these elements are dynamically cre ...