Skip to content

Commit 3f33132

Browse files
TedGoasTedGoas
authored
Merge pull request #181 from TedGoas/fix-underlined-buttons-in-Win10-Mail
Updated <style> and buttons
2 parents b0056f3 + 1648eaa commit 3f33132

File tree

3 files changed

+22
-22
lines changed

3 files changed

+22
-22
lines changed

‎cerberus-fluid.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,11 @@
7373
-ms-interpolation-mode:bicubic;
7474
}
7575

76+
/* What it does: Prevents Windows 10 Mail from underlining links despite inline CSS. Styles for underlined links should be inline. */
77+
a {
78+
text-decoration: none;
79+
}
80+
7681
/* What it does: A work-around for email clients meddling in triggered links. */
7782
*[x-apple-data-detectors], /* iOS */
7883
.unstyle-auto-detected-links *,
@@ -97,11 +102,6 @@
97102
display: none !important;
98103
}
99104

100-
/* What it does: Prevents underlining the button text in Windows 10 */
101-
.button-link {
102-
text-decoration: none !important;
103-
}
104-
105105
/* What it does: Removes right gutter in Gmail iOS app: https://github.com/TedGoas/Cerberus/issues/89 */
106106
/* Create one of these media queries for each additional viewport size you'd like to fix */
107107

@@ -256,7 +256,7 @@ <h1 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 25px; line-he
256256
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin: auto;">
257257
<tr>
258258
<td class="button-td button-td-primary" style="border-radius: 4px; background: #222222;">
259-
<a class="button-a button-a-primary" href="https://google.com/" style="background: #222222; border: 1px solid #000000; font-family: sans-serif; font-size: 15px; line-height: 15px; text-decoration: none; padding: 13px 17px; display: block; border-radius: 4px;"><span class="button-link" style="color:#ffffff">Primary Button</span></a>
259+
<a class="button-a button-a-primary" href="https://google.com/" style="background: #222222; border: 1px solid #000000; font-family: sans-serif; font-size: 15px; line-height: 15px; text-decoration: none; padding: 13px 17px; color: #ffffff; display: block; border-radius: 4px;">Primary Button</a>
260260
</td>
261261
</tr>
262262
</table>

‎cerberus-hybrid.html‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,11 @@
7373
-ms-interpolation-mode:bicubic;
7474
}
7575

76+
/* What it does: Prevents Windows 10 Mail from underlining links despite inline CSS. Styles for underlined links should be inline. */
77+
a {
78+
text-decoration: none;
79+
}
80+
7681
/* What it does: A work-around for email clients meddling in triggered links. */
7782
*[x-apple-data-detectors], /* iOS */
7883
.unstyle-auto-detected-links *,
@@ -97,11 +102,6 @@
97102
display: none !important;
98103
}
99104

100-
/* What it does: Prevents underlining the button text in Windows 10 */
101-
.button-link {
102-
text-decoration: none !important;
103-
}
104-
105105
/* What it does: Removes right gutter in Gmail iOS app: https://github.com/TedGoas/Cerberus/issues/89 */
106106
/* Create one of these media queries for each additional viewport size you'd like to fix */
107107

@@ -295,7 +295,7 @@ <h1 style="margin: 0 0 10px; font-size: 25px; line-height: 30px; color: #333333;
295295
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin: auto;">
296296
<tr>
297297
<td class="button-td button-td-primary" style="border-radius: 4px; background: #222222;">
298-
<a class="button-a button-a-primary" href="https://google.com/" style="background: #222222; border: 1px solid #000000; font-family: sans-serif; font-size: 15px; line-height: 15px; text-decoration: none; padding: 13px 17px; display: block; border-radius: 4px;"><span class="button-link" style="color:#ffffff">Centered Primary Button</span></a>
298+
<a class="button-a button-a-primary" href="https://google.com/" style="background: #222222; border: 1px solid #000000; font-family: sans-serif; font-size: 15px; line-height: 15px; text-decoration: none; padding: 13px 17px; color: #ffffff; display: block; border-radius: 4px;">Centered Primary Button</a>
299299
</td>
300300
</tr>
301301
</table>
@@ -563,7 +563,7 @@ <h2 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 18px; line-he
563563
<table role="presentation" cellspacing="0" cellpadding="0" border="0" class="center-on-narrow" style="float:left;">
564564
<tr>
565565
<td class="button-td button-td-primary" style="border-radius: 4px; background: #222222;">
566-
<a class="button-a button-a-primary" href="https://google.com/" style="background: #222222; border: 1px solid #000000; font-family: sans-serif; font-size: 15px; line-height: 15px; text-decoration: none; padding: 13px 17px; display: block; border-radius: 4px;"><span class="button-link" style="color:#ffffff">Primary Button</span></a>
566+
<a class="button-a button-a-primary" href="https://google.com/" style="background: #222222; border: 1px solid #000000; font-family: sans-serif; font-size: 15px; line-height: 15px; text-decoration: none; padding: 13px 17px; color: #ffffff; display: block; border-radius: 4px;">Primary Button</a>
567567
</td>
568568
</tr>
569569
</table>
@@ -629,7 +629,7 @@ <h2 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 18px; line-he
629629
<table role="presentation" cellspacing="0" cellpadding="0" border="0" class="center-on-narrow" style="float:left;">
630630
<tr>
631631
<td class="button-td button-td-primary" style="border-radius: 4px; background: #222222;">
632-
<a class="button-a button-a-primary" href="https://google.com/" style="background: #222222; border: 1px solid #000000; font-family: sans-serif; font-size: 15px; line-height: 15px; text-decoration: none; padding: 13px 17px; display: block; border-radius: 4px;"><span class="button-link" style="color:#ffffff">Primary Button</span></a>
632+
<a class="button-a button-a-primary" href="https://google.com/" style="background: #222222; border: 1px solid #000000; font-family: sans-serif; font-size: 15px; line-height: 15px; text-decoration: none; padding: 13px 17px; color: #ffffff; display: block; border-radius: 4px;">Primary Button</a>
633633
</td>
634634
</tr>
635635
</table>

‎cerberus-responsive.html‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,11 @@
6868
table-layout: auto;
6969
}
7070

71+
/* What it does: Prevents Windows 10 Mail from underlining links despite inline CSS. Styles for underlined links should be inline. */
72+
a {
73+
text-decoration: none;
74+
}
75+
7176
/* What it does: Uses a better rendering method when resizing images in IE. */
7277
img {
7378
-ms-interpolation-mode:bicubic;
@@ -97,11 +102,6 @@
97102
display: none !important;
98103
}
99104

100-
/* What it does: Prevents underlining the button text in Windows 10 */
101-
.button-link {
102-
text-decoration: none !important;
103-
}
104-
105105
/* What it does: Removes right gutter in Gmail iOS app: https://github.com/TedGoas/Cerberus/issues/89 */
106106
/* Create one of these media queries for each additional viewport size you'd like to fix */
107107

@@ -286,7 +286,7 @@ <h1 style="margin: 0 0 10px; font-size: 25px; line-height: 30px; color: #333333;
286286
<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" style="margin: auto;">
287287
<tr>
288288
<td class="button-td button-td-primary" style="border-radius: 4px; background: #222222;">
289-
<a class="button-a button-a-primary" href="https://google.com/" style="background: #222222; border: 1px solid #000000; font-family: sans-serif; font-size: 15px; line-height: 15px; text-decoration: none; padding: 13px 17px; display: block; border-radius: 4px;"><span class="button-link" style="color:#ffffff">Centered Primary Button</span></a>
289+
<a class="button-a button-a-primary" href="https://google.com/" style="background: #222222; border: 1px solid #000000; font-family: sans-serif; font-size: 15px; line-height: 15px; text-decoration: none; padding: 13px 17px; color: #ffffff; display: block; border-radius: 4px;">Centered Primary Button</a>
290290
</td>
291291
</tr>
292292
</table>
@@ -454,7 +454,7 @@ <h2 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 18px; line-he
454454
<table role="presentation" cellspacing="0" cellpadding="0" border="0" class="center-on-narrow" style="float:left;">
455455
<tr>
456456
<td class="button-td button-td-primary" style="border-radius: 4px; background: #222222;">
457-
<a class="button-a button-a-primary" href="https://google.com/" style="background: #222222; border: 1px solid #000000; font-family: sans-serif; font-size: 15px; line-height: 15px; text-decoration: none; padding: 13px 17px; display: block; border-radius: 4px;"><span class="button-link" style="color:#ffffff">Primary Button</span></a>
457+
<a class="button-a button-a-primary" href="https://google.com/" style="background: #222222; border: 1px solid #000000; font-family: sans-serif; font-size: 15px; line-height: 15px; text-decoration: none; padding: 13px 17px; color: #ffffff; display: block; border-radius: 4px;">Primary Button</a>
458458
</td>
459459
</tr>
460460
</table>
@@ -497,7 +497,7 @@ <h2 style="margin: 0 0 10px 0; font-family: sans-serif; font-size: 18px; line-he
497497
<table role="presentation" cellspacing="0" cellpadding="0" border="0" class="center-on-narrow" style="float:left;">
498498
<tr>
499499
<td class="button-td button-td-primary" style="border-radius: 4px; background: #222222;">
500-
<a class="button-a button-a-primary" href="https://google.com/" style="background: #222222; border: 1px solid #000000; font-family: sans-serif; font-size: 15px; line-height: 15px; text-decoration: none; padding: 13px 17px; display: block; border-radius: 4px;"><span class="button-link" style="color:#ffffff">Primary Button</span></a>
500+
<a class="button-a button-a-primary" href="https://google.com/" style="background: #222222; border: 1px solid #000000; font-family: sans-serif; font-size: 15px; line-height: 15px; text-decoration: none; padding: 13px 17px; color: #ffffff; display: block; border-radius: 4px;">Primary Button</a>
501501
</td>
502502
</tr>
503503
</table>

0 commit comments

Comments
 (0)