I'm building a responsive email message, and it's rendering well in every email client except for Gmail for iPhone 6 and 6+, using iOS 10. The only thing that's going wrong is that the registered trademark and copyright symbols in the message are appearing many font sizes larger and in a blue color, when they're supposed to be gray (#646464), 9px high, with a vertical-align property of 3px.
EMAIL_PRTNR_NAME in the code snippet represents a JavaScript variable which pulls in a brand name with a registered trademark in it.
I'm using the a[x-apple-data-detectors] style in the CSS, although the registered trademarks and copyright symbols are not linked to anything.
Has this happened to anyone before? Any ideas on how to fix?
Thank you in advance!
enlarged, blue registered trademark symbol
<table width="600" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="30"> </td>
<td width="24" class="mobileHide"> </td>
<td width="353" valign="middle" align="left" style="-webkit-text-size-adjust:none; color:#646464; font-size:16px; font-family:Helvetica, Arial, sans-serif; line-height:22px;">
<div style="font-family:Helvetica, Arial, sans-serif; height:6px; font-size:6px; line-height:6px;">
</div>
<table width="353" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="353" valign="middle" align="left" style="-webkit-text-size-adjust:none; color:#646464; font-size:16px; font-family:Helvetica, Arial, sans-serif; line-height:22px;"><span style="-webkit-text-size-adjust:none; color:#646464; font-size:16px; font-family:Helvetica, Arial, sans-serif; line-height:22px;">FULL_NAME</span><br></td>
</tr>
<tr>
<td width="353" valign="middle" align="left" style="-webkit-text-size-adjust:none; color:#646464; font-size:13px; font-family:Helvetica, Arial, sans-serif; line-height:22px;"><span style="-webkit-text-size-adjust:none; color:#646464; font-size:13px; font-family:Helvetica, Arial, sans-serif; line-height:22px;">EMAIL_PRTNR_NAME</span><br></td>
</tr>
</table>
<div style="height:6px; font-size:6px; line-height:6px;">
</div>
</td>
<td width="30"> </td>
</tr>
</table>
©
<span style="line-height: 15px; vertical-align: 4px; font-size:12px;">Ⓒ</span>
®
<span style="line-height: 15px; vertical-align: 4px; font-size:13px;">Ⓡ</span>
™
<span style="line-height: 12px; vertical-align: 7px; font-size:8px;">TM</span>
<span style="line-height: 15px; vertical-align: 4px; font-size:12px;">Ⓒ</span>
<span style="line-height: 15px; vertical-align: 4px; font-size:13px;">Ⓡ</span>
<span style="line-height: 12px; vertical-align: 7px; font-size:8px;">TM</span>
I am experiencing a similar issue where google is replacing it with their 'goomoji' that is rendering with incorrect styling. I believe this is a bug in gmail and will fix itself.
To avoid Enlarged registered symbol in gmail and Outlook use this code.
©
<!--[if gte mso 9]>© <![endif]--> <!--[if !mso]><!--> Ⓒ<!--<![endif]-->
®
<!--[if gte mso 9]><span style="font-size: 55%; line-height: 0px; vertical-align: 4px;">®</span> <![endif]--><!--[if !mso]><!--><span style="font-size: 55%; line-height: 0px; vertical-align: 4px;">Ⓡ</span><!--<![endif]-->
I think Google fixed it - have been tested and looks OK for ® and ™
Related
I'm trying to achieve a colored background for my table. I want that when it is on its responsive form, the first lines that are selected in the picture (the lines that start with this word "Caracteristiques") have a specific background color to structure my table, is this possible?
body{font-family:'Varela Round';}
th {
background: #333;
color: white;
font-weight: bold;
}
#media (max-width: 500px) {
.responsive-table-line td:before { content: attr(data-title); }
.responsive-table-line table,
.responsive-table-line thead,
.responsive-table-line tbody,
.responsive-table-line th,
.responsive-table-line td,
.responsive-table-line tr {
display: block;
}
.responsive-table-line thead tr {
display:none;
}
.responsive-table-line td {
position: relative;
border: 0px solid transparent;
padding-left: 50% !important;
white-space: normal;
text-align:right;
}
.responsive-table-line td:before {
position: absolute;
top: 0px;
left: 0px;
width: 45%;
padding-right: 15px;
height:100%;
white-space: nowrap;
text-overflow: ellipsis !important;
overflow:hidden !important;
text-align:left;
background-color:#f8f8f8;
padding:2px;
}
}
<div class="responsive-table-line" style="margin:0px auto;max-width:700px;">
<table class="table table-bordered table-condensed table-body-center" >
<thead>
<tr>
<th class="data-title">Caractéristiques</th>
<th>Quantité </th>
<th>Part CAC 40</th>
<th>Part Filiales +1000K€</th>
<th>Contacts IT</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Caractéristiques">Société</td>
<td data-title="Quantité">230</td>
<td data-title="Part CAC 40">40</td>
<td data-title="Filiales +1000K€">190</td>
</tr>
<tr>
<td data-title="Caractéristiques">Contacts</td>
<td data-title="Quantité">16 700</td>
<td data-title="Part CAC 40">10 000</td>
<td data-title="Filiales +1000K€">6 700</td>
<td data-title="Contacts IT">21%</td>
</tr>
<tr>
<td data-title="Caractéristiques">Email nominatif</td>
<td data-title="Quantité">16 700</td>
</tr>
<tr>
<td data-title="Caractéristiques">Opt-out</td>
<td data-title="Quantité">3%</td>
</tr>
<tr>
<td data-title="Caractéristiques">Lignes directes/mobiles</td>
<td data-title="Quantité">35%</td>
</tr>
<tr>
<td data-title="Caractéristiques">% Contact IT</td>
<td data-title="Quantité">21%</td>
</tr>
</tbody>
</table>
</div>
You can do what you are trying to do with :pseudo, I have added just two rules
body {
font-family: 'Varela Round';
}
th {
background: #333;
color: white;
font-weight: bold;
}
#media (max-width: 500px) {
/**** Added CSS Rules ****/
tr:nth-child(1n+1) td:first-child {
background: red;
}
tr:nth-child(1n+1) td:first-child:before {
background: red;
}
/**** End of Added CSS Rules ****/
.responsive-table-line td:before {
content: attr(data-title);
}
.responsive-table-line table,
.responsive-table-line thead,
.responsive-table-line tbody,
.responsive-table-line th,
.responsive-table-line td,
.responsive-table-line tr {
display: block;
}
.responsive-table-line thead tr {
display: none;
}
.responsive-table-line td {
position: relative;
border: 0px solid transparent;
padding-left: 50% !important;
white-space: normal;
text-align: right;
}
.responsive-table-line td:before {
position: absolute;
top: 0px;
left: 0px;
width: 45%;
padding-right: 15px;
height: 100%;
white-space: nowrap;
text-overflow: ellipsis !important;
overflow: hidden !important;
text-align: left;
background-color: #f8f8f8;
padding: 2px;
}
}
<div class="responsive-table-line" style="margin:0px auto;max-width:700px;">
<table class="table table-bordered table-condensed table-body-center" >
<thead>
<tr>
<th class="data-title">Caractéristiques</th>
<th>Quantité </th>
<th>Part CAC 40</th>
<th>Part Filiales +1000K€</th>
<th>Contacts IT</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Caractéristiques">Société</td>
<td data-title="Quantité">230</td>
<td data-title="Part CAC 40">40</td>
<td data-title="Filiales +1000K€">190</td>
</tr>
<tr>
<td data-title="Caractéristiques">Contacts</td>
<td data-title="Quantité">16 700</td>
<td data-title="Part CAC 40">10 000</td>
<td data-title="Filiales +1000K€">6 700</td>
<td data-title="Contacts IT">21%</td>
</tr>
<tr>
<td data-title="Caractéristiques">Email nominatif</td>
<td data-title="Quantité">16 700</td>
</tr>
<tr>
<td data-title="Caractéristiques">Opt-out</td>
<td data-title="Quantité">3%</td>
</tr>
<tr>
<td data-title="Caractéristiques">Lignes directes/mobiles</td>
<td data-title="Quantité">35%</td>
</tr>
<tr>
<td data-title="Caractéristiques">% Contact IT</td>
<td data-title="Quantité">21%</td>
</tr>
</tbody>
</table>
</div>
Hope this helps :)
<div class="dataTables_scroll">
<div class="dataTables_scrollHead ui-state-default" style="overflow: hidden; position: relative; border: 0px none; width: 100%;">
<div class="dataTables_scrollBody" style="position: relative; overflow: auto; width: 100%;">
<table id="DataTables_Table_4" class="dataTable no-footer" role="grid" aria-describedby="DataTables_Table_4_info" style="width: 100%;">
<thead>
<tbody>
<tr class="odd" role="row">
<tr class="even" role="row">
<td class="center-col multiRowSelect sorting_1">
<td>GROUP4</td>
<td class=" center-col">Enterprise Open</td>
<td class=" center-col">0</td>
</tr>
</tbody>
</table>
</div>
Are you absolutely sure you don't like xpath for that? It is awfully powerful and can in fact very well be used to find by text:
Click Element xpath=//*[contains(text(),"GROUP")]/parent::tr
I am doing responsive mail and I need to make responsive td in table (without class or using media-query).
Simply - I need on small devices rank the td under them.
<table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="fff" style="width:100%; background-color: #fff; max-width:600px;">
<tr>
<td><img src="pic" /></td>
<td><a href="https://blahblah2.com/><img src="pic" /></a></td>
<td><a href="http://www.blahblah3.com/><img src="pic" /></a></td>
<td><a href="http://www.blahblah4.com/><img src="pic" /></a></td>
</tr>
</table>
You can try display:inline-block for every column in your table. It will make the columns shift below each column when width of the screen decreases.
As you have mentioned that you don't need class so m writing the inline style for each column. Try this code :
<table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="fff" style="width: 100%;
background-color: #fff; max-width: 600px;">
<tr>
<td style="display: inline-block; padding: 5px;">
<p>
hellohello</p>
</td>
<td style="display: inline-block; padding: 5px;">
<p>
hellohello</p>
</td>
<td style="display: inline-block; padding: 5px;">
<p>
hellohello</p>
</td>
<td style="display: inline-block; padding: 5px;">
<p>
hellohello</p>
</td>
</tr>
</table>
Fiddle here
You can create a media query to force all the td elements to drop below each other at a certain screen width. This ensures they all become vertical-aligned at the same time. It also preserves the table's horizontal-aligned print format if you are generating a report for printing.
#media only screen and (min-width: 0px) and (max-width: 700px) {
td {
display:inline-block;
padding:5px;
width:100%;
}
}
could someone tell me why this isn't scaling the type in the class called "heading"?
I'm probably missing some vital element, but I can't see what it is!
Thanks!
Jim
#media only screen and (max-width: 480px)
{
/* iPhone only (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) - only screen and (max-width: 480px)
(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)*/
body,table,td,p,a,li,blockquote {
-webkit-text-size-adjust:none !important;
}
table {width: 100% !important;}
.responsive-image
img {
height: auto; line-height: 100% !important;
max-width: 100% !important;
width: 100% !important;
}
.heading
{ font-size: 10px !important;
}
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" align="center" width="600" bgcolor="#FFFFFF">
<tr>
<td width="600"><table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="padding: 0 0px;" align="center" class="responsive-image" width="307" height="auto"><img src="http://contact.friendslife.co.uk/ukassets/images/482/Responsive_test/fpi_test_top_sky.jpg" width="100%" alt="" ></td>
<td width="266" bgcolor="#ED4134" style="font-family:Arial; font-weight:300; font-size:15px; color:#FFFFFF; padding:0px; text-align:right; class="heading">Newsletter June</td>
you missed a quote on the td ;)
<td width="266" bgcolor="#ED4134" style="font-family:Arial; font-weight:300; font-size:15px; color:#FFFFFF; padding:0px; text-align:right;" class="heading">Newsletter June</td>
When I create an application in google app engine and open the application (http:localhost:8080) in safari it works fine. But when I open in chrome or fire fox it does not run (http:localhost:8080) and gives the following page.
<HTML><HEAD><TITLE>Error Message</TITLE>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
<STYLE id=L_10061_1>A {
FONT-WEIGHT: bold; FONT-SIZE: 10pt; COLOR: #005a80; FONT-FAMILY: tahoma
}
A:hover {
FONT-WEIGHT: bold; FONT-SIZE: 10pt; COLOR: #0d3372; FONT-FAMILY: tahoma
}
TD {
FONT-SIZE: 8pt; FONT-FAMILY: tahoma
}
TD.titleBorder {
BORDER-RIGHT: #955319 1px solid; BORDER-TOP: #955319 1px solid; PADDING-LEFT: 8px; FONT-WEIGHT: bold; FONT-SIZE: 12pt; VERTICAL-ALIGN: middle; BORDER-LEFT: #955319 0px solid; COLOR: #955319; BORDER-BOTTOM: #955319 1px solid; FONT-FAMILY: tahoma; HEIGHT: 35px; BACKGROUND-COLOR: #d2b87a; TEXT-ALIGN: left
}
TD.titleBorderx {
BORDER-RIGHT: #955319 0px solid; BORDER-TOP: #955319 1px solid; PADDING-LEFT: 8px; FONT-WEIGHT: bold; FONT-SIZE: 12pt; VERTICAL-ALIGN: middle; BORDER-LEFT: #955319 1px solid; COLOR: #978c79; BORDER-BOTTOM: #955319 1px solid; FONT-FAMILY: tahoma; HEIGHT: 35px; BACKGROUND-COLOR: #d2b87a; TEXT-ALIGN: left
}
.TitleDescription {
FONT-WEIGHT: bold; FONT-SIZE: 12pt; COLOR: black; FONT-FAMILY: tahoma
}
SPAN.explain {
FONT-WEIGHT: normal; FONT-SIZE: 10pt; COLOR: #934225
}
SPAN.TryThings {
FONT-WEIGHT: normal; FONT-SIZE: 10pt; COLOR: #934225
}
.TryList {
MARGIN-TOP: 5px; FONT-WEIGHT: normal; FONT-SIZE: 8pt; COLOR: black; FONT-FAMILY: tahoma
}
.X {
BORDER-RIGHT: #955319 1px solid; BORDER-TOP: #955319 1px solid; FONT-WEIGHT: normal; FONT-SIZE: 12pt; BORDER-LEFT: #955319 1px solid; COLOR: #7b3807; BORDER-BOTTOM: #955319 1px solid; FONT-FAMILY: verdana; BACKGROUND-COLOR: #d1c2b4
}
.adminList {
MARGIN-TOP: 2px
}
</STYLE>
<META content="MSHTML 6.00.2800.1170" name=GENERATOR></HEAD>
<BODY bgColor=#f3f3ed>
<TABLE cellSpacing=0 cellPadding=0 width="100%">
<TBODY>
<TR>
<TD class=titleBorderx width=30>
<TABLE height=25 cellSpacing=2 cellPadding=0 width=25 bgColor=black>
<TBODY>
<TR>
<TD id=L_10061_x class=x valign=middle align=center>X</TD>
</TR>
</TBODY>
</TABLE>
</TD>
<TD class=titleBorder id=L_10061_2>Network Access Message:<SPAN class=TitleDescription> The page cannot be displayed</SPAN> </TD>
</TR>
</TBODY>
</TABLE>
<TABLE id=spacer>
<TBODY>
<TR>
<TD height=10></TD></TR></TBODY></TABLE>
<TABLE width=400>
<TBODY>
<TR>
<TD noWrap width=25></TD>
<TD width=400><SPAN class=explain><ID id=L_10061_3><B>Explanation:</B></ID></SPAN><ID id=L_10061_4> The Web server refused the connection. </ID><BR><BR>
<B><SPAN class=tryThings><ID id=L_10061_5><B>Try the following:</B></ID></SPAN></B>
<UL class=TryList>
<LI id=L_10061_6><B>Refresh page:</B> Search for the page again by clicking the Refresh button. The timeout could have occurred due to Internet congestion.
<LI id=L_10061_7><B>Check spelling:</B> Check that the Web page address is spelled correctly. The address may have been mistyped.
<LI id=L_10061_8><B>Access from a link:</B> If there is a link to the page you are looking for, try accessing the page from that link.
<LI id=L_10061_9><B>Contact website:</B> You may want to contact the website administrator to make sure the Web page still exists. You can do this by using the e-mail address or phone number listed on the website home page.
</UL>
<ID id=L_10061_10>If you are still not able to view the requested page, try contacting your administrator or Helpdesk.</ID> <BR><BR>
</TD>
</TR>
</TBODY>
</TABLE>
<TABLE id=spacer><TBODY><TR><TD height=15></TD></TR></TBODY></TABLE>
<TABLE width=400>
<TBODY>
<TR>
<TD noWrap width=25></TD>
<TD width=400 id=L_10061_11><B>Technical Information (for support personnel)</B>
<UL class=adminList>
<LI id=L_10061_12>Error Code 10061: Connection refused
<LI id=L_10061_13>Background: The server you are attempting to access has refused the connection with the gateway. This usually results from trying to connect to a service that is inactive on the server.
<LI id=L_10061_14>Date: 11/8/2012 1:19:34 PM [GMT]
<LI id=L_10061_15>Server: NBS-TMGPTCL.Cdocs.local
<LI id=L_10061_16>Source: Remote server
</UL>
</TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>
It says you are trying to connect to :
NBS-TMGPTCL.Cdocs.local
and not
http:localhost:8080
in any case, use
http//:localhost:8080