Enlarged, blue registered trademark symbol in Gmail for iPhone in iOS 10 - responsive-design

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>

I think Google fixed it - have been tested and looks OK for ® and ™

©
<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]-->

Related

Classic Asp Extract Date in a text file

I would like to know who can I retrieve the date from a file.
This is how I open my file:
Set fs=Server.CreateObject("Scripting.FileSystemObject")
Set f=fs.OpenTextFile(Server.MapPath("checkno_2211.html"), 1)
'Need something here to find the first date MM/DD/YYYY in the file
f.Close
Set f=Nothing
Set fs=Nothing
The code above will open the .html file now I would like to find the first date that is in that file but I don't know how to do it. :-(
The .html file will have multiple dates in it, but I only need to grab the first one.
The html and format of the date is like this:
<TD class="auto-style32" style="height: 31px">
Date:
10/7/2011</TD>
The source code of the .html file is
<HTML>
<HEAD>
<script SRC="include/general.js" language="javascript" type="text/javascript"></script>
<style type="text/css">
textarea {
font-size: 14px;
font-weight: bold;
font-family: Arial;
}
.style1 {
text-align: center;
}
.style2 {
border-style: solid;
border-width: 1px;
}
.style3 {
color: #FFFFFF;
background-color: #000000;
}
.style4 {
background-color: #000000;
}
.style5 {
color: #FFFFFF;
}
.style7 {
vertical-align: text-bottom;
}
.style8 {
font-family: Arial, Helvetica, sans-serif;
}
.style9 {
background-color: #C0C0C0;
}
.style10 {
vertical-align: middle;
}
.auto-style30 {
text-align: center;
margin-left: 0px;
}
.auto-style32 {
text-align: left;
border-bottom-style: solid;
border-bottom-width: 1px;
}
.auto-style35 {
background-color: #000000;
}
.auto-style36 {
border-top-style: solid;
border-top-width: 1px;
}
</style>
<script language="javascript" type="text/javascript">
function GetURL_Alpha(){
document.getElementById("currentURL").value= location.href;
}
</script>
<script SRC="include/general.js" language="javascript" type="text/javascript"></script>
</HEAD>
<BODY onload="printIt();GetURL_Alpha();" style="margin: 0 5">
<input name="currentURL" ID="currentURL" type="hidden" style="width: 1528px">
<CENTER>
<head>
<style type="text/css">
.auto-style36 {
text-align: center;
}
</style>
</head>
<TABLE border=0 style="width: 100%">
<TR>
<TD class="auto-style36">
<font face="Century Gothic">
<img src="logopro2.jpg"><BR>
</font>
<strong>
<font face="Century Gothic" size="1">111 Test Main St Los Angeles,
CA 12345 </font></strong><font face="Century Gothic" size="1">
<strong><BR>
</strong>
</font> <STRONG><FONT face="Century Gothic" size=1>PHONE: (888) 111-2222 FAX: (877)
111-2233</FONT></STRONG>
<br><br>
</TD>
</TR>
</TABLE>
</CENTER>
<table style="width: 100%">
<tr>
<td style="width: 408px"><font face="Arial">
<strong>
<h3 class="auto-style30" style="width: 492px">
FULL NAME<BR>
123 Test Ave<BR>
MIAMI, FL<BR>
</h3>
</strong>
</font>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
<P align = center>
<FONT face="Comic Sans MS" size=5><span class="style8">
<HR>
<P align=center>
<TABLE border=0 style="width: 100%" cellspacing="0">
<tr>
<FONT face="Comic Sans MS" size=5><span class="style8">
<TD class="auto-style32" style="height: 31px">
Date:
10/7/2011</TD>
<td style="height: 31px">Name: Someone</td>
<td class="style1" colspan="2" style="height: 31px">
<FONT face="Comic Sans MS" size=5><span class="style8">
<strong>STATEMENT</strong></td>
<TD colspan=3 align=right style="height: 31px">
Check #: 11008
</TD>
</span></font>
</tr>
<TR>
<TD colspan=7 align=center class="auto-style35">
<span class="style5"></span>
<STRONG><FONT face="Arial" size=2 color="white">
<img src="more_images/ContainerRed.png" class="style10">
MORE INFORMATION</FONT></STRONG>
</TD>
</TR>
As always,
Thanks for any help...
You could try something like this -
Dim ParseDate, NextLineIsDate
NextLineIsDate = False
Set fso = Server.CreateObject("Scripting.FileSystemObject")
set fs = fso.OpenTextFile(Server.MapPath("Saved\checkno_2211.html"), 1, true)
Do Until fs.AtEndOfStream
If NextLineIsDate Then
ParseDate = Replace(Replace(fs.ReadLine," ",""),"</TD>","")
Exit Do
End If
If Instr(fs.ReadLine,"Date:") > 0 Then NextLineIsDate = True
Loop
Response.Write ParseDate
fs.close: set fs = nothing
The code above should output the date you're searching for to the screen.
This will work providing the text Date: only appears directly above dates in your text file. If it doesn't you might need some thing more complicated but it's hard to tell without seeing all the contents of your file.

asp gridview css border goes out of scope

The below is the css and asp code for the gridview.
The border are spreading out then expected.
I tried setting Width=100% which worked, but I want the border to follow the size of grid instead spreading the grid view to occupy space unnecessarily.
This is an Asp Gridview with css for rounding corners
CSS:
.rounded-corners {
border: 1px solid #565656;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
overflow: hidden;
}
.Grid td, .Grid th {
border: 1px solid #565656;
text-align: center;
padding-top: 3.5px;
padding-bottom: 3.5px;
font-size: medium;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}
Source Code:
<div class="rounded-corners">
<div>
<table class="Grid" cellspacing="0" rules="all" border="1" style="border-collapse:collapse;">
<tbody>
<tr>
<th>Description</th>
<th>Time</th>
<th>Time</th>
</tr>
<tr>
<td>abc</td>
<td>07:30</td>
<td>07:30</td>
</tr>
<tr>
<td>def</td>
<td>07:30</td>
<td>07:30</td>
</tr>
<tr>
<td>ghi</td>
<td>07:30</td>
<td>07:30</td>
</tr>
</tbody>
</table>
</div>
</div>
I think the grid is rendered like this:
<div class="Grid" id="XXXX_gv1">
<table>
<tr><th>column 1</th><th>column 2</th><th>column 3</th></tr>
<tr><td>value 1</td><td>value 2</td><td>value 3</td></tr>
<tr><td>value 1</td><td>value 2</td><td>value 3</td></tr>
</table>
</div>
so you could then style it:
.Grid {
display:inline-block; /* trick to not take 100%. */
/* alternatively: you could border .Grid>table */
border-radius:8px;
}
.Grid>table>tbody>tr:first-row {
/* special stuff for the first row here */
}

HTMLAgility pack C# unclosed colgroup tag

I have a string (HTML) being posted to server side and then it is validated using HTMLAgility pack. In the HTML there is an unclosed colgroup tag.
After sanitizing, the closing colgroup tag appears but right between closing "tbody" and "table" tag
BEFORE:
<table width="3265" class="mce-item-table" style="width: 2452pt; border-collapse: collapse;" border="0" cellspacing="0" cellpadding="0">
<colgroup><col width="80" style="width: 60pt;">
<col width="245" style="width: 184pt;" span="13"> <!-- MISSING COLGROUP tag-->
<tbody><tr height="20" style="height: 15pt;">
<td width="80" height="20" style="width: 60pt; height: 15pt; color: blue; text-decoration: underline; text-underline-style: single;"><span style="color: blue;">31109173</span></td>
<td width="245" style="width: 184pt; font-family: Arial; font-size: 9pt;">31109173</td>
<td width="245" align="right" style="width: 184pt; font-family: Arial; font-size: 9pt;">May 09,2017 9:54 AM</td>
<td width="245" align="right" style="width: 184pt; font-family: Arial; font-size: 9pt;">May 08,2017 5:21 PM</td>
</tr>
<tr height="20" style="height: 15pt;">
<td height="20" style="height: 15pt; color: blue; text-decoration: underline; text-underline-style: single;"><span style="color: blue;">30933775</span></td>
<td style="font-family: Arial; font-size: 9pt;">30933775</td>
<td align="right" style="font-family: Arial; font-size: 9pt;">May 09,2017 9:50 AM</td>
<td align="right" style="font-family: Arial; font-size: 9pt;">Apr 28,2017 6:22 PM</td>
</tr>
</tbody></table>
AFTER:
<table width="3265" class="mce-item-table" style="width: 2452pt; border-collapse: collapse;" border="0" cellspacing="0" cellpadding="0">
<colgroup><col width="80" style="width: 60pt;">
<col width="245" style="width: 184pt;" span="13">
<tbody><tr height="20" style="height: 15pt;">
<td width="80" height="20" style="width: 60pt; height: 15pt; color: blue; text-decoration: underline; text-underline-style: single;"><span style="color: blue;">31109173</span></td>
<td width="245" style="width: 184pt; font-family: Arial; font-size: 9pt;">31109173</td>
<td width="245" align="right" style="width: 184pt; font-family: Arial; font-size: 9pt;">May 09,2017 9:54 AM</td>
<td width="245" align="right" style="width: 184pt; font-family: Arial; font-size: 9pt;">May 08,2017 5:21 PM</td>
</tr>
<tr height="20" style="height: 15pt;">
<td height="20" style="height: 15pt; color: blue; text-decoration: underline; text-underline-style: single;"><span style="color: blue;">30933775</span></td>
<td style="font-family: Arial; font-size: 9pt;">30933775</td>
<td align="right" style="font-family: Arial; font-size: 9pt;">May 09,2017 9:50 AM</td>
<td align="right" style="font-family: Arial; font-size: 9pt;">Apr 28,2017 6:22 PM</td>
</tr>
</tbody></colgroup></table>
<!-- ^^ </colgroup> has appeared above-->
I tried setting "OptionFixNestedTags" flag to true. I still get the same result.
I tried various options from HTMLAgility pack and setting them true. This didn't work.
OptionFixNestedTags = true;
OptionAutoCloseOnEnd = true;
There is a nice Nuget package which sanitizes the html. The problem which I faced was tackled here -> HtmlSanitizer
Hope this helps.

How to get javescript AD to open its link in new window?

I got some code from a vendor that allows my organization to be awarded points when buyers purchase anything on the vendor's site when coming from my site. problem is, the window opens up WITHIN the ad, and not in a new window.
below is the code...what do I need to add? or change? to allow it to open in a new window?
<script type="text/javascript"> function vcp_gobad175(){ window.location='https://www.virtualcapoeira.com/store.htm?affcode=1039380713'; } </script> <div align="center"> <table border="0" cellpadding="0" style="border-collapse: collapse" id="capafftable1" bgcolor="#FFFFFF"> <tr> <td align="center" height="3"> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="https://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="175" height="150" id="ba175x150_02" align="middle"> <param name="allowScriptAccess" value="always" /> <param name="movie" value="https://www.virtualcapoeira.com/graphics/ba175x150_02.swf" /><param name="quality" value="high" /><param name="bgcolor" value="#000000" /><embed sRc="https://www.virtualcapoeira.com/graphics/ba175x150_02.swf" quality="high" bgcolor="#000000" width="175" height="150" name="ba175x150_02" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="https://www.macromedia.com/go/getflashplayer" /> </object> </td> </tr> <tr> <td align="center" height="3"></td> </tr> <tr> <td align="center"> <a target="_blank" title="Capoeira" style="font-size: 13px; font-weight: 700; color: #0066CC;" href="https://www.virtualcapoeira.com/store.htm?affcode=1039380713">VirtualCapoeira.com</a></td> </tr> <tr> <td style="font-size: 9px; color: #0066CC;" align="center"> <a target="_blank" title="Capoeira Music, Audio, MP3s, Downloads" style="font-size: 9px; text-decoration: none; color: #0066CC;" href="https://www.virtualcapoeira.com/music-store.htm?affcode=1039380713">Music</a>,  <a target="_blank" title="Capoeira Videos, DVDs, Downloads" style="font-size: 9px; text-decoration: none; color: #0066CC;" href="https://www.virtualcapoeira.com/video-store.htm?affcode=1039380713">Videos</a>,  <a target="_blank" title="Capoeira Instruments, Berimbaus, Atabaques, Pandeiros, Agogos, RecoRecos" style="font-size: 9px; text-decoration: none; color: #0066CC;" href="https://www.virtualcapoeira.com/berimbaus.htm?affcode=1039380713">Instruments</a> &  <a target="_blank" title="Capoeira Pants, Tops, Havaianas, Downloads" style="font-size: 9px; text-decoration: none; color: #0066CC;" href="https://www.virtualcapoeira.com/store.htm?affcode=1039380713">Gear</a> </td> </tr> <tr> <td style="font-size: 9px; font-weight: 700; color: #000000;" align="center"> <a target="_blank" title="Capoeira" style="font-size: 9px; text-decoration: none; color: #000000;" href="https://www.virtualcapoeira.com/index.htm?affcode=1039380713">Capoeira</a> - Are you Game?</td> </tr> </table> </div>
Use window.open
function vcp_gobad175(){
window.open('https://www.virtualcapoeira.com/store.htm?affcode=1039380713', '_blank');
}
you can use like this
<a href="javascript:void(0)"
onclick="window.open('http://www.google.com','name',
'width=600,height=400')">Link</a>
This will open the url in a new window. Tested Working

How to Reopen pure CSS3 modal dialog

I have following Modal Dialog (popup) using only CSS3 in my asp page for user registration:
HTML :
<%-- Modal PopUp starts here--%>
<div id="openModal" class="modalDialog">
<div> X
<table style="width:100%;">
<tr>
<td style="text-align: center; width: 100%;"></td>
</tr>
<tr>
<td style="text-align: center; width: 100%;">
<asp:Label ID="lblErrorMSG2" runat="server" Font-Bold="True" ForeColor="#FF3300" Text="Email ID Already Taken " Visible="False"></asp:Label>
</td>
</tr>
<tr>
<td style="text-align: center; width: 100%;">
<input id="txtCustFName" name="txtCustFName" type="text" required placeholder="Enter Your First Name" style="width: 80%" />
</td>
</td>
</tr>
<tr>
<td style="text-align: center; width: 100%;">
<input id="txtCustLName" name="txtCustLName" type="text" required placeholder="Enter Your Last Name" style="width: 80%" />
</td>
</td>
</tr>
<tr>
<td style="text-align: center; width: 100%;">
<input id="txtCustREmail" name="txtCustREmail" type="email" required placeholder="Enter Valid Email ID" style="width: 80%" />
</td>
</td>
</tr>
<tr>
<td style="text-align: center; width: 100%;">
<input id="txtCustRPwd" name="txtCustRPwd" type="password" required placeholder="Enter Password" style="width: 80%" />
</td>
</td>
</tr>
<tr>
<td style="text-align: center; width: 100%;">
<input id="txtCustRePwd" name="txtCustRePwd" type="password" required placeholder="ReType Password" style="width: 80%" />
</td>
</td>
</tr>
<tr>
<td style="text-align: center; width: 100%;">
<input id="txtCustPh" name="txtCustPh" type="number" size="10" min="10" max="10" required placeholder="Enter Valid Mobile No" style="width: 80%" />
</td>
</td>
</tr>
<tr>
<td class="style1" style="text-align: center; width: 100%;" onclick="btnSignUp()">
<asp:Button ID="btnSingUp" runat="server" onclick="signUp" Text="Login" />
</td>
</tr>
<tr>
<td style="text-align: center; width: 100%;"> </td>
</tr>
</table>
</div>
</div>
<%--Modal PopUp Ends Here--%>
CSS :
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;}
.close:hover { background: #00d9ff;
}
In my asp page I've following anchor tag which is used to display the popup:
Register
Now the problem is:
As this is registration form, I want server side validation of existing email id .
If user entered email id already exist in DB I want to reopen the above modal dialog with an error message Email ID already exist.
I m not able to reopen that dialog box.
Is there any way to do this using js?
Plz help me.
The tutorial for modal dialog is on site:
click here
For visualizing modal dialog:
click here
Thanx in advance.
for server side validation I suggest you to use javascript web method for this. By using this web method your popup didn't close while page check server side validation.....
Change the :target to also accept a class:
.modalDialog:target, .modalDialog.target {
opacity:1;
pointer-events: auto;
}
And then when you find out the email is invalid, you can just do:
$('.modalDialog').addClass('target')
or the non-jquery equivalent.

Resources