Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix random border in Outlook on Hybrid's RTL pattern #285

Closed
wants to merge 3 commits into from
Closed

Fix random border in Outlook on Hybrid's RTL pattern #285

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c2d8a7a
Rewrite RTL pattern to remove horizontal padding from outer-most cont…
TedGoas Feb 27, 2022
1184d98
Update LTR pattern to match HTML/CSS
TedGoas Feb 27, 2022
1832188
Adjust padding on right edge of first visual column
TedGoas Feb 27, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 14 additions & 14 deletions cerberus-hybrid.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -517,29 +517,29 @@ <h1 style="margin: 0 0 10px; font-size: 25px; line-height: 30px; color: #333333;
<!-- Thumbnail Left, Text Right : BEGIN -->
<tr>
<!-- dir=ltr is where the magic happens. This can be changed to dir=rtl to swap the alignment on wide while maintaining stack order on narrow. -->
<td dir="ltr" height="100%" valign="top" width="100%" style="font-size:0; padding: 10px; background-color: #ffffff;" class="darkmode-bg">
<td dir="ltr" height="100%" valign="top" width="100%" style="font-size:0; padding: 10px 0; text-align: left; background-color: #ffffff;" class="darkmode-bg">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="660" style="width: 660px;">
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="680">
<tr>
<td valign="top" width="220" style="width: 220px;">
<td valign="top" width="220">
<![endif]-->
<div style="display:inline-block; margin: 0 -1px; max-width: 220px; min-width:160px; vertical-align:top; width:100%;" class="stack-column">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td dir="ltr" style="padding: 0 10px 10px 10px;">
<td dir="ltr" style="padding: 10px 0 10px 20px;">
<img src="https://via.placeholder.com/200" width="200" height="" border="0" alt="alt_text" class="center-on-narrow" style="width: 100%; max-width: 200px; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;">
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td valign="top" width="440" style="width: 440px;">
<td valign="top" width="460">
<![endif]-->
<div style="display:inline-block; margin: 0 -1px; max-width: 440px; min-width:280px; vertical-align:top;" class="stack-column">
<div style="display:inline-block; margin: 0 -1px; max-width: 460px; min-width:280px; vertical-align:top;" class="stack-column">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td dir="ltr" style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 10px 10px 0; text-align: left;" class="center-on-narrow">
<td dir="ltr" style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 10px 20px; text-align: left;" class="center-on-narrow">
<h2 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 18px; line-height: 22px; color: #333333; font-weight: bold;">Class aptent taciti sociosqu</h2>
<p style="margin: 0 0 10px 0;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<!-- Button : BEGIN -->
Expand Down Expand Up @@ -567,29 +567,29 @@ <h2 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 18px; line-he
<!-- Thumbnail Right, Text Left : BEGIN -->
<tr>
<!-- dir=rtl is where the magic happens. This can be changed to dir=ltr to swap the alignment on wide while maintaining stack order on narrow. -->
<td dir="rtl" height="100%" valign="top" width="100%" style="font-size:0; padding: 10px; text-align: left; background-color: #ffffff;" class="darkmode-bg">
<td dir="rtl" height="100%" valign="top" width="100%" style="font-size:0; padding: 10px 0; text-align: left; background-color: #ffffff;" class="darkmode-bg">
<!--[if mso]>
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="660" style="width: 660px;">
<table role="presentation" border="0" cellspacing="0" cellpadding="0" width="680">
<tr>
<td valign="top" width="220" style="width: 220px;">
<td valign="top" width="220">
<![endif]-->
<div style="display:inline-block; margin: 0 -1px; max-width: 220px; min-width:160px; vertical-align:top; width:100%;" class="stack-column">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td dir="ltr" style="padding: 0 10px 10px 10px;">
<td dir="ltr" style="padding: 10px 20px;">
<img src="https://via.placeholder.com/200" width="200" height="" border="0" alt="alt_text" class="center-on-narrow" style="width: 100%; max-width: 200px; height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;">
</td>
</tr>
</table>
</div>
<!--[if mso]>
</td>
<td valign="top" width="440" style="width: 440px;">
<td valign="top" width="460">
<![endif]-->
<div style="display:inline-block; margin: 0 -1px; max-width: 440px; min-width:280px; vertical-align:top;" class="stack-column">
<div style="display:inline-block; margin: 0 -1px; max-width: 460px; min-width:280px; vertical-align:top;" class="stack-column">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td dir="ltr" style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 10px 10px 0; text-align: left;" class="center-on-narrow">
<td dir="ltr" style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 10px 0 10px 20px; text-align: left;" class="center-on-narrow">
<h2 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 18px; line-height: 22px; color: #333333; font-weight: bold;">Class aptent taciti sociosqu</h2>
<p style="margin: 0 0 10px 0;">Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
<!-- Button : BEGIN -->
Expand Down