I am using lxml.html for parsing html content. But I don't understand why lxml is dropping "body" tag attributes.
Tried using both lxml.html.parse and lxml.html.document_fromstring as suggested here
But still it is not working.
Example html string:-
<html class="hello"> <head> <iframe src="index.html"></iframe> </head> <body class="foo"><h1>a</h1></body> </html>
Does anyone else also faced this issue?
Possibly too late to help, but I've run into a similar issue with the same underlying parser (lxml uses libxml2, which I am using directly). I believe the problem is that <iframe>s cannot appear in the <head> of the document. When libxml2 sees one there, it attempts to continue parsing by implicitly closing the <head> and starting a <body>. This implicitly created <body> is then confusing you as it does not have the class in your actual <body> tag. In fact I think your actual <body> will not appear in the parsed model at all.
Related
I have a paragraph in my website in which I have to highlight few words. Instead of using div and a class, I used a tag which I name myself as follows
<html>
<head>
<style>
highlight{
background-color:#FFF176;
}
</style>
</head>
<body>
A quick <highlight>brown</highlight> fox jumped over a lazy dog.
</body>
</html>
Here is the JSSFiddle
It seems to work fine. But is there anything wrong with this? Is it okay if I use it for a project?
There is nothing wrong in using custom tags. However, you didn't define the tags you used. Please see the links below to articles on proper ways to user custom tags/elements.
Using custom elements
Extending HTML by Creating Custom Tags
You can use this solution in a project, functionally it's ok but is advisable that you attach your tags with a common classname to define styles sheets (CSS), tags structures (HTML) and functionality (JavaScript) in differents source files.
I recommended you to put in a different file your CSS styles with a link-tag inside the head tag like this:
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
In this pages you can learn much more about it:
MDN Web Docs Mozilla
Though it is alright to do that, I would suggest the following: https://jsfiddle.net/838Lrnwk/
<html>
<head>
<style>
#high .highlight{
background-color:#FFF176;
}
</style>
</head>
<body>
<p id="high">
A quick <a class="highlight">brown</a> fox jumped over a lazy dog.
</p>
</body>
This would give the same effect; however, you can control what paragraph has the the effect in and all other tags like font,em, strong, etc and still retain the highlight.
I am trying to apply a css style sheet to an erb file in sinatra, but when loading on localhost with rack I keep getting a 404 error telling me the file cannot be found.
It feels like I have tried everything from changing file paths to adding type, rel, media to the html tag but nothing seems to work. I am really stumped.
My HTML Code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://localhost:9292/public/styles/home.css">
</head>
<body>
<h1> I am working </h1>
</body>
</html>
My CSS
h1 {
color: red;
}
Any help would be majorly appreciated. Thanks in advance!
I solved the issue
As almost suspected, the file path to my css wasn't resolving properly. For the longest time I had no idea why, but it seems that shotgun/sinatra wasn't serving up the files properly.
I'm still not entirely sure what's going on but there is a really good bit of help which I found here:
Github Repo
With a bit of a tutorial here:
Ruby/Sinatra Framework
Kudos to the guy. It's 1:30am and it finally worked.
I'm trying to satisfy 2 checkers: W3C validator and google page insight
Google Page Insight suggested to me to load asynchronously all blocking CSS files. Well, I've rewritten the stylesheet file inclusion in preload way, as follow, and deferred from head to the end of the body:
...
<link rel="preload" href="mystyles.css" media="all" as="style"
onload="this.rel='stylesheet'"/>
</body>
Google Page Insight forced me to get it out from the head and put it at the end of the body.
Ok, I'm OK against Google Page Insight.
But W3C Validator says me now:
Error: A link element must not appear as a descendant of a body element unless the link element has an itemprop attribute or has a rel attribute whose value contains dns-prefetch, pingback, preconnect, prefetch, prerender, or stylesheet
Why "preload" is not admitted in rel attribute out of the head? I've tried to assign an itemprop, but it's not possible to have an itemprop and a rel in the same link.
Maintainer of the W3C HTML checker (validator) here. A checker bug was caused this. When I added rel=preloadsupport to the checker, I forgot to add it to the list of the rel values the checker code compares against to decide if a particular link element is allowed in the body.
I’ve now fixed it in the checker sources and pushed the fix to https://validator.w3.org/nu/.
So, the checker will no longer report an error for the code above. Thanks for catching this.
I use an example
<!DOCTYPE html>
<html lang="">
<head>
<title>Test</title>
<link rel="preload" href="style.css" as="style">
<link rel="stylesheet" href="style.css">
</head>
<body>
<p></p>
</body>
</html>
and https://validator.w3.org/nu/#textarea return success.
look in https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
I am facing issues that Chinese characters are not displayed properly in chrome. Below is a screenshot of whats happening.
I am wondering is there any extensions that is causing this or its because my CSS / fonts are not coded well.
I really want to fix this via my code side. Is it possible?
EDIT: Some of the words show up while some did not.
I did add in the meta charset=UTF-8
EDIT2 : #torazaburo, showing you the code snippet. The problem is that firefox is able to display all the Chinese text!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1>My Website</h1>
<p>Some text...</p>
</body>
have you tried using meta charset
<meta charset="UTF-8">
It enables browsers to understand any language it can be chinese , Urdu , hindi any language which you will write.
I am wondering is there any extensions that is causing this or its because my CSS / fonts are not coded well.
It's unlikely that this has anything to do with an extension. It could be due to a font issue, but that's also relatively unlikely. Probably you have an encoding problem, so:
Make sure your file is saved in UTF-8.
Make sure the file is being served as UTF-8.
Specify the the <meta charset="UTF-8"> tag proposed in another answer.
Make sure you have fonts selected which can display Chinese.
See also the second answer to this question.
This page doesn't get the table styles from the style sheet. If I put the same styles in the page itself, they are applied. What could cause this? The css file name is correct and is read by other pages.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Pagelinks | Known Issues</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="pagelinks_windows.css" />
<!-- style>
#known_issues th, #known_issues td {
font-size: 13px;
text-align: left;
}
</style -->
</head>
<body>
<h1>Known Issues</h1>
<p>
Known bugs and issues are listed here.</p>
<table id="known_issues">
<tr><th>Tracking No.</th><th>Category</th><th>Description</th><th>Status</th><th>Workaround</th></tr>
<tr><td>plt001</td><td>Site</td><td>Site navigation broken on Internet Explorer 8</td><td>Closed</td><td>None. That browser version has a major bug involving javascript objects. Users must upgrade to Internet Explorer 9.</td></tr>
<tr><td>plt002</td><td>Site</td><td>Saints and feasts do now show description</td><td>Open</td><td>None. The description data for the Saints and the feasts is being compiled.</td></tr>
</table>
<br/>
<br/>
Test if the content of the css file is visible.
Try to open it in the browser.
Common possible error when letters-case (A\a and so on) in file-names differs - this willn't work on *nix hosting servers, ever if it worked localy on windows.
Another common situation: when is error in path to file from current file-directory.
Are your stylesheets in the same root directory as this html file? Common practice is to put stylesheets, js, includes, etc into different directories. Perhaps you follow this convention and simply forgot href="css/pagelinks_windows.css"? Hard to find the answer to your problem without much more information but it's usually something small you're missing. One of those that you end up with a forehead-slap once you find it :)
What does your stylesheet look like?
I think you might have some conflicting css, try adding your table style at the VERY bottom of pagelinks_windows.css