I have html table with IP (10.212.133.144) and GUID (6237be55-0e51-4a0c-9c8a-701451389736) values. IEEdge-Win10 browser applies weird hyperlink formatting on them.
This is a simplified example without any css style and IEEdge is doing an extra magic. I don't want any hyperlink auto formatting, how can I disable this behaviour? It should work without end user interaction. No other browsers do it.
Reference question but I could not compile a working solution
Taming the automatic telephone number thing in the windows 10 edge browser
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<table cellspacing="2" cellpadding="2" style="border: 1px solid blue;">
<thead id="tasks_header">
<tr>
<th class="normal">#</th>
<th class="normal">IP</th>
<th class="normal">GUID</th>
</tr>
</thead>
<tbody id="rows1">
<tr><td>1</td><td>1.2.3.4</td><td>a8f890ee-0ff3-44af-ba53-17c173eb62d4</td></tr>
<tr><td>2</td><td>11.22.33.44</td><td>6237be55-0e51-4a0c-9c8a-701451389736</td></tr>
</tbody>
<tbody id="rows2">
<tr><td>1b</td><td>10.212.133.144</td><td>5150471e-5528-4823-88f8-4fff9e2377be</td></tr>
<tr><td>2c</td><td>10.210.116.164</td><td>17b9dc7a-1e70-41e0-8abc-8202597930e9</td></tr>
</tbody>
</table>
</body>
</html>
edit: This behaviour is seen on two separate Win10 machines already, will try more once get access to PCs.
They are being recognized as phone numbers. You can disable this by adding this metatag
<meta name="format-detection" content="telephone=no"/>
Related
I know the title of this post sounds strange, but it's exactly what's happening. While testing an email template with Email and Acid and Litmus I found that Outlook.com, in all browsers, was migrating styling from one DOM element to another. I thought at first it was an unescaped tag or other common issue with email, but that wasn't the case. I also thought it could be the button markup, which was pulled from Litmus's own Bullet Proof Buttons post. But after trying all four options, plus others I found online, it didn't make a difference.
To discreetly troubleshoot this I crafted an email template with only the bare minimum needed to reproduce the what's happening.
Email Template: https://codepen.io/anon/pen/bOQmzz
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="width=device-width" name="viewport">
<meta charset="utf-8">
<title>Page Title</title>
</head>
<body>
<!-- BUTTON -->
<table>
<tbody>
<tr>
<td style="padding: 10px;">
<a style="background-color: #800080; border: 25px solid #EB7035;" href="#" >Button Label</a>
</td>
</tr>
</tbody>
</table>
<!-- TEXT -->
<table>
<tbody>
<tr>
<td style="padding: 50px;">
<p>Hello World</p>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I sent a test email from Litmus to an Outlook.com account I have access to and pulled the actual markup it's generating. Here it is.
<table>
<tbody>
<tr>
<td style="padding:10px">Button Label</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td style="background-color:#800080; border:25px solid #EB7035; padding:50px">
<p>Hello World</p>
</td>
</tr>
</tbody>
</table>
As you can see it's taking the styling from TD > A and applying it to the following TD. In the original email template I had, this happened multiple times throughout. See the examples below
Original Template: Each blue sections is broken
Testing Template: Outlook.com in multiple browsers
Testing Template: Examples of other email clients
This feels more like an Outlooks.com bug than an Outlook.com quirk. Can anyone explain what's happening and suggest ways to resolve this?
After writing this all up I realized it was also stripping the A tag. And that this was probably because it wasn't a resolvable URL. In the original template I had ESP codes {campaign-ID...etc} and it probably wasn't resolving those either. So it just stripped them for security reasons, cool. But then for some reason, it takes the styling of that A link, strips it, and applies it to an element further down in the DOM. WTF were they thinking!
Hope this saves someone else the trouble from having to go down the same rabbit hole.
tl;dr This is only an issue when testing links with unresolvable URLs as outlook removes them for security reasons, but then fumbles and applies the styling on the removed A link to another DOM element.
Can somebody explain me what's going on?
I'm using thymeleaf and springboot
i got template file
out.html
<html lang="en" xmlns:th="http:www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>SAD</title>
<link th:href="#{/css/style.css}" rel="stylesheet"/>
</head>
<body>
<h1>sad</h1>
<div class="container">
<div th:if="${not #lists.isEmpty(list)}">
<h2>People to deport</h2>
<table class ="table table-striped">
<tr>
<th>Name</th>
<th>Surname</th>
<th width="100px">Age</th>
</tr>
<tr th:each = "people :${list}">
<td th:text="${people.name}"></td>
<td th:text="${people.surname}"></td>
<td th:text="${people.age}"></td>
</tr>
</table>
</div>
</div>
<p th:text="#{hello}">text</p>
</body>
</html>
I got request mapping on it in my controller. It works correctly. But as you see i used resource bundle and my default language is russian. (it has displayed '?' signs) on that place.
<p th:text="#{hello}">text</p>
So i wanted to display russian language content on my page . I changed charset from UTF-8 to UTF-16 and everything crashed. Actually codding type is not matter cause i tried to do that with charset=ISO-8859-1
Server starts, displays other templates. But that one does not work even if i turn back UTF-8 charset back and restart server.
I solved it like:
1. I copied my html from it;
2.Delete the file and create new named also out.html;
3.Put that html in the file and it works.
So can somebody explain what is going on?
I am developing simple html page(try.html) with code as below
<!DOCTYPE html>
<html>
<head>
<title>Table</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
</head>
<body>
<table id="OuterTable" align="center" cellspacing="0">
<tr align = "center">
<td>Your Father</td>
</tr>
<tr align = "center">
<td>
<img src="arrow.jpg"/>
</td>
</tr>
<tr align = "center">
<td>You</td>
</tr>
</table>
</body>
</html>
I have placed both try.html and arrow.jpg in same folder. When opened webpage on desktop, images are displayed properly. When transferred the html page and image to mobile in same folder in internal storage, images are not getting displayed.
Please let me know, if I should specify different path for mobile page.
Edit:
Is it something wrong with the way I am testing? I am directly taking html page on mobile and opening it in chrome. Do I need to set up localhost and access through mobile?
Change the file extension to jpeg. File information below confirms its actually a jpeg.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Butiqs newsletter</title>
Then some internal css follows, the following text in the first table:
<!--Tekst.-->
<table id="inleiding" width="600" cellpadding="0" cellspacing="0">
<tr height="30"><td></td></tr>
<tr>
<td width="20"></td>
<td><font size="5">Hi yara,</font></td>
<td width="20"></td>
</tr>
<tr height="10"><td></td></tr>
<tr>
<td width="20"></td>
<td><font>We are excited to have you as part of our Butiqs’ family and we’d like to keep you in the loop of our progress. So, without further ado, here’s where we are now, 5 months after we kickstarted the project…
</font></td>
<td width="26"></td>
</tr>
<tr height="20"><td></td></tr>
</table>
Now the strange thing is, my text is perfectly normal. Only when I live preview it in my browser I see strange symbols in my text.
Image of the weird symbols
This happens everytime when I use a 'symbol in html. What is the problem? Even when I make it a normal html doctype, the problem stays.
Can someone help me?
For Html 4.01 you would need to put
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
in your head tag.
This is a problem with your encoding.
You can try fixing this by adding this in your <head>:
<meta charset="utf-8" />
Note: This is for HTML 5 documents.
Read more here
For HTML 4 documents, use:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Read more here
We came across a strange behavior while using html tag. Actually the issue was because of improper usage of the tag. As a result of that, the page was getting submitted 3 times in Mozilla Firefox and 2 times in IE7. Here is the issue.
<link rel="stylesheet" type="text/css" title="Style" href=''/css/image.css'>
This was the code that we were using in one of our J2EE application. When we inspected the request and response (using HTTP Watch), we found out that the page was requested 3 times from the server. We found out that the additional "quote" after href= is causing the problem. We were not able to find out the reason why this was causing multiple page submissions. Is it because, the additional quote makes the href empty and because of that browser tries to load the styleclass from the same URL that loaded the page?
Can someone please help to find out the reason why this is happening? Any help will be greatly appreciated.
this explanation came from this article on Yahoo Developer site. Section Avoid Empty Image src:
When an empty string is encountered as a URI, it is considered a relative URI and is resolved according to the algorithm defined in section 5.2. This specific example, an empty string, is listed in section 5.4.
Although it still not clear whether this behavior affect href or not (the article mainly concerned on empty src). But looks like it does:
Hopefully, browsers will not have this problem in the future. Unfortunately, there is no such clause for <script src=""> and <link href="">. Maybe there is still time to make that adjustment to ensure browsers don't accidentally implement this behavior.
note: I never encounter such behavior so it's just theoretical answer :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
</head>
<body>
<table width="100%" cellspacing="0" cellpadding="0" border="0" class="mainOutterTable">
<tbody>
<tr>
<td>
<table class="layoutColumn" cellpadding="0" cellspacing="0">
<tr>
<td style="width:100%;" valign="top">
<table class="layoutRow" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" width="910">
<table class="layoutColumn" cellpadding="0" cellspacing="0">
<tr>
<td style="width:100%;" valign="top">
<table class="layoutRow" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" width="294">
<table class="layoutColumn" cellpadding="0" cellspacing="0">
<tr>
<td style="width:100%;" valign="top">
<a name="7_N1K8HIC0GOO780I2B1KASD3047"></a>
<div class="wpsPortletBody">
This is a sample textf 3.
<link rel="stylesheet" type="text/css" title="Style" href=''/>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I was able to reproduce the problem on a test page.
This is mentioned in Section 5.2 of http://www.apps.ietf.org/rfc/rfc3986.html#sec-5.2
If the Relative path is empty, then the target URI is the base path.
if (R.path == "") then
T.path = Base.path;