In the latest TinyMCE 3.5.8 it seems there's a slight bug with creating a new table.
Clicking the new table button, setting a border, border color, and background color yields this result:
<table style="border-color: #39f30b; border-width: 4px; background-color: #f30b22; width: 250px; height: 135px;" border="4">
<tbody>
<tr> <td> </td> <td> </td> </tr>
<tr> <td> </td> <td> </td> </tr>
</tbody>
</table>
Right clicking on the table, selecting table proeprties, not doing anything else and hitting apply, then changes the markup to this:
<table style="border-color: #39f30b; border-width: 4px; background-color: #f30b22; width: 250px; height: 135px; border-style: solid;" border="4">
<tbody>
<tr> <td> </td> <td> </td> </tr>
<tr> <td> </td> <td> </td> </tr>
</tbody>
</table>
The problem is that the first one is missing the border-style: solid; The initial table, missing the border-style: solid; is breaking IE9, and affecting the display in Firefox.
Is there any sort of setting or patch to fix this?
Related
I have an email template with different block background colors, and because of this the colors are bleeding and creating lines between the blocks
I tried all the solutions I found and nothing worked, and after hours of digging I think the problem is that the nested tables are slightly shorter than their parent tables
here you can see the problem and what I mean by slightly shorter (the orange is showing and the white is within it, if it was the same height no orange will be showing):
and this is the code for one of the blocks:
<div>
<table
align="center"
border="0"
cellpadding="0"
cellspacing="0"
style="margin: 0; padding: 0; background:{$cordial-variable}; border-collapse: collapse;"
bgcolor="{$cordial-variable}"
width="100%"
>
<tr>
<td align="center" valign="top">
<table
width="700"
bgcolor="#fcfcfc"
border="0"
cellspacing="0"
cellpadding="0"
style="
mso-table-rspace: 0pt;
mso-table-lspace: 0pt;
border-collapse: collapse;
border: 0;
width: 100%;
height: auto;
padding: 0;
"
>
<tr>
<td align="center" valign="top">
<div>
<table
width="600"
border="0"
cellspacing="0"
cellpadding="0"
style="
mso-table-rspace: 0pt;
mso-table-lspace: 0pt;
border-collapse: collapse;
border: 0;
padding: 0;
width: 80%;
height: auto;
"
>
<tr>
<td style="35px" height="35"></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
the things I tried: setting background color for all tables and tds, setting valign for all trs, changing the heights to even values instead of odd ones, setting the images with 0 line-height and font-size, setting the height to 100% instead of auto.
Any further suggestions?
To get a block a specific height, cross email compatible, you need only this:
<tr>
<td style="padding:35px 0 0 0;font-size:0;line-height: 0;"> </td>
</tr>
Note the which you don't have--some email clients will add that in and then use a default font-size or line-height on it.
The first <table> you have is fine: cellpadding, cellspacing and border are zeroed and that should be enough.
<div>s are not needed.
How can I create colored rows in table in Azure Devops Wiki? I want to create something like below
.table-striped th {
height: 45px;
background-color: #bfff00 !important;
color: #191919;
}
.table-striped tr:nth-child(even) td {
background-color: #4287f5;
}
<div>
<table class="table-striped">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</table>
</div>
The main way of creating tables in Azure Wiki is Markdown table, and from what I found is that Markdown does not support color. Maybe there is any trick?
From Azure Wiki Syntax Help I found out that HTML tags and YAML tables are also supported, but everything that I was able to achieve is coloring via span tag inside markdown:
<span style="background-color: red">57065</span>|<span style="background-color: red">4560</span>|<span style="background-color: red">I AM TABLE ROW</span>
and that looks ugly.
Is there a way to achieve full-fledged coloring?
Try with inline styling. Here I made an example:
<table style="border:ridge 4px red">
<tr style="background-color:blue;color:white;" id="ROW1">
<td style="border:ridge 4px red" >Cell 1.1</td>
<td style="border:ridge 4px red">Cell 1.2</td>
<td style="border:ridge 4px red">Cell 1.3</td>
</tr>
<tr style="background-color:yellow;color:green;" id="ROW2">
<td style="border:ridge 4px red">Cell 2.1</td>
<td style="border:ridge 4px red">Cell 2.2</td>
<td style="border:ridge 4px red">Cell 2.3</td>
</tr>
</table>
It looks like that in Azure DevOps Wiki:
I hope it will help you, but.. I strongly encourage to keep markdown simple. Please take a look at this stack discussion: Color in Markdown
I have created a custom email template and the content is below :
...
<table id="Table_01" width="70%" border="0" cellpadding="0" cellspacing="0" style=" backgroud:red;border-collapse: collapse;border-spacing: 0;">
<tr>
<td valign="top">
<img style="display:block; border: 0px;width:100%;" src="images/01.png" alt="">
</td>
</tr>
<tr>
<td valign="top">
<table id="Table_02" width="100%" border="0" cellpadding="0" cellspacing="0" style=" border-collapse: collapse;border-spacing: 0;">
<tr>
<td>
<img style="display:block; border: 0px;width:100%;" src="images/02_01.png" alt="">
</td>
<td >
<img style="display:block; border: 0px;width:100%;" src="images/02_03.png" alt="">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top">
<img style="display:block; border: 0px;width:100%;" src="images/03.png" alt="">
</td>
</tr>
</table>
...
Above code created a table with three tr and it is showing properly in desktop but in mobile devices showing some spacing.
As above image table showing red line spacing in mobile devices.
How to remove these spacing?
**It helps to include a few CSS resets in the <head> of the email.**Here are a few that I use the focus on resetting spacing and borders of <table>s and <td>s:
<head>
<style>
/* What it does: Fixes webkit padding issue. Fix for Yahoo mail table alignment bug. Applies table-layout to the first 2 tables then removes for anything nested deeper. */
table {
border-spacing: 0 !important;
border-collapse: collapse !important;
table-layout: fixed !important;
margin: 0 auto !important;
}
table table table {
table-layout: auto;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
mso-table-lspace: 0pt !important;
mso-table-rspace: 0pt !important;
}
</style>
</head>
Here is the full CSS reset I use for emails.
I'm trying to get rid of these white lines that iPhone users are seeing in these emails. This can be reproduced by viewing the email in chrome when re-sizing the browser. Whether the white lines appear or not depends on the size of the window. It only happens to the image slices of the left-most data-cell in a table-row.
Here is the code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
<title></title>
<style type="text/css">
/***START, CSS targeting client bugs***/
body {
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
/* Prevents Webkit and Windows Mobile platforms from changing default font sizes. */
}
.ExternalClass {
width: 100%;
/* Forces Hotmail to display emails at full width */
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
/* Forces Hotmail to display normal line spacing */
}
body {
margin: 0;
padding: 0;
/* Resets all body margins and padding to 0 for good measure */
}
p {
margin: 1em 0;
}
table td {
border-collapse: collapse;
/*This resolves the Outlook 07, 10, and Gmail td padding issue */
}
#-ms-viewport {
width: device-width;
}
/***END, CSS targeting client bugs***/
/***START, Reset styles***/
p {
margin: 0;
padding: 0;
margin-bottom: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: black;
line-height: 100%;
}
/***END, Reset styles***/
#media only screen and (max-width: 480px) {
a[href^="tel"],
a[href^="sms"] {
text-decoration: underline;
color: #0063ba;
pointer-events: none;
cursor: default;
}
.mobile_link a[href^="tel"],
.mobile_link a[href^="sms"] {
text-decoration: underline;
color: #0063ba !important;
pointer-events: auto;
cursor: default;
}
body {
overflow-x: hidden !important;
text-align: center !important;
background-color: #ffffff !important;
}
body[yahoo] .container {
width: 320px !important;
display: block !important;
}
body[yahoo] .drop {
width: 100% !important;
display: block !important;
text-align: center !important;
padding: 2px 0 !important;
}
body[yahoo] .hide_this {
display: none !important;
}
body[yahoo] .respond_to_width {
width: 100% !important;
display: block !important;
}
body[yahoo] .mobile_image {
width: 100% !important;
height: auto !important;
}
body[yahoo] .pushto100 {
width: 100% !important;
}
body[yahoo] .centerthis {
text-align: center !important;
display: inline-block !important;
}
}
</style>
</head>
<custom name="opencounter" type="tracking">
<body style="margin: 0px; padding:0px; -webkit-text-size-adjust:none; -ms-text-size-adjust: none;" yahoo="fix">
<!--CENTER EMAIL_start-->
<table cellpadding="0" cellspacing="0" border="0" width="100%" class="respond_to_width">
<tr>
<td align="center" valign="top">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td align="left" valign="top" style="font-size:11px;font-family:arial,sans-serif;color:#333333;padding:10px 0;">
Click to view this message in a browser
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="left" valign="top">
<table cellpadding="0" cellspacing="0" border="0" width="640" class="respond_to_width">
<tr>
<td colspan="2" align="left" valign="top">
<a conversion="TRUE" alias="body_header" href="https://www.google.com"><img class="mobile_image" style="display:block;" border="0" src="http://i.imgsafe.org/84aa6e6.png" width="640" height="143" alt="email header" title="start shopping"></a>
</td>
</tr>
<tr>
<td align="left" valign="top">
<a conversion="TRUE" alias="body_zone1" href="https://www.google.com"><img class="mobile_image" style="display:block;" border="0" src="http://i.imgsafe.org/87ba827.png" width="321" height="192" alt="clickzone 1" title="shop Halloween costmes"></a>
</td>
<td align="left" valign="top">
<a conversion="TRUE" alias="body_zone2" href="https://www.google.com"><img class="mobile_image" style="display:block;" border="0" src="http://i.imgsafe.org/8b26eb0.png" width="319" height="192" alt="clickzone 2" title="shop Halloween costmes"></a>
</td>
</tr>
<tr>
<td align="left" valign="top">
<a conversion="TRUE" alias="body_zone3" href="https://www.google.com"><img class="mobile_image" style="display:block;" border="0" src="http://i.imgsafe.org/8c23711.png" width="321" height="159" alt="clickzone 3"></a>
</td>
<td align="left" valign="top">
<a conversion="TRUE" alias="body_zone4" href="https://www.google.com"><img class="mobile_image" style="display:block;" border="0" src="http://i.imgsafe.org/8d3de4a.png" width="319" height="159" alt="clickzone 4" title="shop Halloween costmes"></a>
</td>
</tr>
<tr>
<td align="left" valign="top">
<a conversion="TRUE" alias="body_zone5" href="https://www.google.com"><img class="mobile_image" style="display:block;" border="0" src="http://i.imgsafe.org/8e4baa8.png" width="321" height="191" alt="clickzone 5" title="shop Halloween costmes"></a>
</td>
<td align="left" valign="top">
<a conversion="TRUE" alias="body_zone6" href="https://www.google.com"><img class="mobile_image" style="display:block;" border="0" src="http://i.imgsafe.org/9053862.png" width="319" height="191" alt="clickzone 6" title="shop Halloween costmes"></a>
</td>
</tr>
<tr>
<td colspan="2" align="left" valign="top">
<a conversion="TRUE" alias="body_footer" href="https://www.google.com"><img class="mobile_image" style="display:block;" border="0" src="http://i.imgsafe.org/9226e55.png" width="640" height="181" alt="email footer" title="contact us, etc"></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="left" valign="top" style="font-size:0%;padding:10px 0 0 0;display:none;">
%%=ContentAreaByName("Divider_Green")=%%
</td>
</tr>
<!--SOCIAL BUTTONS/-->
<tr>
<td align="center" valign="top">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="left" valign="top">
FaceBook
</td>
<td align="left" valign="top"> | </td>
<td align="left" valign="top">
<a href="https://plus.google.com/" alias="Google+" target="_blank">
Google+
</a>
</td>
<td align="left" valign="top"> | </td>
<td align="left" valign="top">
<a href="https://instagram.com/" alias="Instagram" target="_blank">
InstaGram
</a>
</td>
<td align="left" valign="top"> | </td>
<td align="left" valign="top">
<a href="http://www.pinterest.com/" alias="Pinterest" target="_blank">
Pintrest
</a>
</td>
<td align="left" valign="top"> | </td>
<td align="left" valign="top">
<a href="https://twitter.com/" alias="Twitter" target="_blank">
Twitter
</a>
</td>
</tr>
</table>
</td>
</tr>
<!--EMAIL, PHONE NUMBER/-->
<tr>
<td align="center" valign="top">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="drop" align="left" valign="top" style="font-size:14px;font-family:arial,sans-serif;color:#6ebe43;padding:0 20px 0 0;">
customerservice#arbitraryLink.com
<span style="font-size:14px;font-family:arial,sans-serif;color:#000001">
| 1.888.777.6666
</span>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td class="drop" align="center" valign="middle">
<!--CTA BUTTON/-->
<br>
<br>
<table cellpadding="0" cellspacing="0" border="0" class="pushto100">
<tr>
<td align="left" valign="middle" style="padding:0 10px">
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td align="center" valign="top" style="font-size:12px;color:#88ab00;font-family:arial,sans-serif;font-weight:bold;">
<span style="text-decoration: none;color:#88ab00;">
sign up for emails</span>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--<br><br>-->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="640" align="center" valign="top" style="font-size:11px;font-family:arial,sans-serif;color:#6ebe43;padding:16px 4px;">
<span style="color:#333333; width:640px;">
*Terms and conditions apply
<br><br>
This email was sent by: %%member_busname%%, %%member_addr%% %%member_city%%, %%member_state%% %%member_postalcode%% %%member_country%%</span>
<br>
<span style="color:#333333;">
This email was sent to: <strong>%%emailaddr%%</strong></span><span style="color:#333333;">. We respect your right to privacy -</span> privacy policy
<br>
<br>
One-Click Unsubscribe
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--CENTER EMAIL_end-->
%%[ var #additionalattribute1, #additionalattribute2, #additionalattribute3, #additionalattribute4 Set #additionalattribute1 = __AdditionalEmailAttribute1 Set #additionalattribute2 = __AdditionalEmailAttribute2 Set #additionalattribute3 = __AdditionalEmailAttribute3 Set #additionalattribute4 = __AdditionalEmailAttribute4 ]%%
<img src="http://track.securedopen-q.com/?sv_cid=0215_01811&sv_emopen=true&sv_svem=%%emailaddr%%&cm_source=tracking_pixel_stuff" height="1" width="1" />
</body>
</html>
You can see the white lines in my jFiddle when resizing the browser in chrome. http://jsfiddle.net/stormbloom/4s0sqkbb/
Please ignore the AMP script unless you think in could be causing rendering problems (which I doubt). I just left it in there so you can see what the entirety of the code looks like.
I discovered if I add an in-line style: outline 1px solid #f00; to the table, it fixes the white line issue. The problem is that many email clients do not support outline, but they add a space where outline is being used. So it causes the table you target to have a noticeable white space in that email client.
To fix this issue and only target iphone and devices using webkit is to create a class called .iphone and add it to a media query which targets iPhone 5, 6 and 6 plus.
#media only screen and (max-width: 414px) {
.iphone {
outline: 1px solid #f00;
}
Add the class "iphone" to the table with the white line issue. This fixes the white line issue and only shows on devices that can work with that media query. This tested with Litmus and with observing on the actual devices.
If I specify Arial as the font for a table, will that cascade down as the default font for all cells/tables within the table?
E.g would this work consistently among popular email clients?
<table align="left" style="font-family: Arial, sans-serif; font-size: 13px;">
<tr>
<td>
<table width="100%">
<tr>
<td>
Another table - would the text here still be Arial?
</td>
</tr>
</table>
</td>
</tr>
</table>
Have just tested in Outlook 2013 and it fails miserably. Not sure how it fairs in the many other better clients but I guess if you want to support the shockingly bad Outlook the answer is to specify styles on every table cell.
It will work for some clients but not for all.. especially in Outlook 2010 and 2013. (same for the percentage of the width)
The best is always to specify the wanted styles and fonts for each <td>
like in the following:
<table align="left" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="width: 100%;">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="font-family: Arial, sans-serif; font-size: 13px;">
Another table - The text here will be formatted for all clients
</td>
</tr>
</table>
</td>
</tr>
</table>
Specifying the font in every new table tag should be sufficient. I'd just copy the style value from your initial table and reuse it for every child table.
You can specify styles on every TD if you want to, but unless something has gone badly wrong (or a new version of Outlook changes this) font styles will apply to all table cells until you enter a new table.
Something like:
<table align="left" style="font-family: Arial, sans-serif; font-size: 13px;">
<tr>
<td>
<table width="100%" style="font-family: Arial, sans-serif; font-size: 13px;">
<tr>
<td>
Another table - would the text here still be Arial?
</td>
</tr>
</table>
</td>
</tr>
</table>