I am creating a web site and need to copy certain HTML from one page to another (rather than re-write it. Take this table for example:
I copy (from Page1.aspx)...
<table class="InfoBox">
<tr>
<td class="InfoBoxTopHeader">Data</td>
</tr>
<tr>
<td class="InfoBoxContent"></td>
</tr>
</table>
Then I paste (into Page2.aspx) and get....
<table class="InfoBox">
<tr>
<td class="InfoBoxTopHeader">Data</td>
</tr>
<tr>
<td class="auto-style1"></td>
</tr>
</table>
It takes the CSS from my CSS file, inserts it in the top of the APSX file and names it auto-style1 in this case only for InfoBoxContent but it could be all sometimes. It is driving me nuts.
I am using Visual Studio 2012. Any ideas why this is happening?
Does page 2 have a header with a link tag pointing to that stylesheet? If css isn't being expressed it may because that specific page doesn't see it. If that's the case, you may need to added a tag pointing to that stylesheet.
Something like:
<LINK href="special.css" rel="stylesheet" type="text/css">
Or more like:
<!DOCTYPE>
<HTML>
<HEAD>
<LINK href="special.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
</BODY>
</HTML>
Related
I'm using springboot and thymeleaf to map to display data from my database on an html page.
<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title></title>
<link rel="stylesheet" type="text/css" th:href="#{/assets/style.css}" />
</head>
<body>
<p th:text="${title}"></p>
Create a new Post
Create a new Comment
<table>
<tr th:each="post : ${posts}">
<td th:text="${post.creationDate}"></td>
<td th:text="${post.titel}"></td>
<td th:text="${post.content}"></td>
<td><a th:href="#{/newComment(postId=${post.id})}">new Comment</a></td>
<td th:text="${post.comments}"></td>
<td><img th:src="${post.bild}"></td>
</tr>
</table>
I used DTOs to map the entities, however when display the actual html page the image is not displayed(404 Error), even though the link is showing up when i inspect the tag.
Am i missing something obvious? Isn't this an easy way to display images on my page, if i don't want to convert them to a bytestream?
I'm guessing you need more information, but i don't know which would be helpful. Any help appreciated!
It's not possible to access local filesystem from a webpage that runs on a web server. See this answer for details.
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.
body {}
.table{
background-color:aqua
}
this is my StyleSheet1.css saved in my local at C:\Users\ingyadav\Documents\Visual Studio 2015\Projects\StyleSheet1.css
<html>
<head>
<link rel="stylesheet" href="file:///C:/Users/ingyadav/Documents/Visual Studio 2015/Projects/StyleSheet1.css" type="text/css" />
</head>
<body>
<table class="table" border="1" style="width:300px;height:500px">
<tr style="width:auto">
<td style="width:150px;height:500px"></td>
<td>
<table border="1" style="width:150px;height:500px">
<tr style="width:auto"><td></td></tr>
<tr style="width:auto"><td></td></tr>
<tr style="width:auto"><td></td></tr>
</table>
</td>
</tr>
</table>
</body>
</html>
And this is my HTML string to be loaded into pdf now
when i pass this to the evo html to pdf converter,its not loading the external css into the pdf.
in evopdf support they mentioned to provide the fully qualified URL's but after using proper URL also its unable to load the external css.
can anyone help me on this please.
No you cannot specify multiple locations in the href attribute. Per the spec, each <link> represents a document that is connected to your html. So by design it would be only one document.
More Example: https://www.w3.org/TR/html401/struct/links.html#h-12.3
At the business I work at we generate reports in an html format, our clients often print these reports. The problem we've run into is that sometimes when the clients print, one of the inside tables will start 1 or 2 pixels before the page break in the print view. This causes the table to disappear but the space to be taken up.
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>test</title>
<style type="text/css">
td { border:1px solid black;}
table {border-collapse:collapse;}
</style>
</HEAD>
<BODY>
<TABLE class="main">
<TR>
<TD>
<TABLE class="second">
<TR>
<TD style="border-top:824px solid-black">1</TD>
</TR>
<TR>
<TD>1_1</TD>
</TR>
<TR>
<TD>1_2</TD>
</TR>
<TR>
<TD>1_3</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD>
<TABLE class="second">
<TR>
<TD>2</TD>
</TR>
<TR>
<TD>2_1</TD>
</TR>
<TR>
<TD>2_2</TD>
</TR>
<TR>
<TD>2_3</TD>
</TR>
</TABLE>
</TD>
</TR>
<TR>
<TD>
<TABLE class="second">
<TR>
<TD>3</TD>
</TR>
<TR>
<TD>3_1</TD>
</TR>
<TR>
<TD>3_2</TD>
</TR>
<TR>
<TD>3_3</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
The code above should reproduce the error, but you may have to add some padding on the border to bump the second table to just before the page break.
we've tried page breaks, padding, border collapse, no border collapse. The error appears to persist when it's just the two tables without any styling aside from the border of the cells. This appears to be a rather large defect, but I've had very little luck finding anything at all about it.
Is this a problem with IE or is there something we can do to get around this issue?
EDIT
We tried with as bare bones as possible (only borders on the TD elements) and we were encountering the same issues.
We were unable to solve the problem, but our work around consisted of using only once cell of the outer table and putting each of the inner tables inside there. This prevented the tables from disappearing near the page breaks.
We faced the exact same problem with IE7 and IE8 in our business application which uses a nested table layout.
Internet Explorer 11 does not have this problem as per our testing evidence for the affected samples.
This is a bug in IE which exists in pre-IE 10 versions as per Microsoft Technical Support, and is reflected also in the Print-to-PDF functionality used by many PDF printers which is how we first located the bug.
Unfortunately I cannot provide any evidence of what I stated. Kindly check in IE11 and confirm if it solved your issue. The other alternative would be to test it out with div-based layout, if you're not willing to switch browsers yet.
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;