I seem to have an obscure issue with a razor template forcing browsers into quirks mode. It is a simple razor template in umbraco 5. The following code makes chrome, firefox, IE all go into quirks mode:
#inherits RenderViewPage
#using System.Web.Mvc.Html;
#using Umbraco.Cms.Web;
#{
Layout = "";
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta charset="utf-8" />
<title>Page title</title>
</head>
<body>
</body>
</html>
If I move the razor syntax completely or move it down so it is not before the doctype it goes into standards compliance mode. I've tried adding various X-UA-Compatible meta tags to no effect.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta charset="utf-8" />
<title>Page title</title>
</head>
<body>
#inherits RenderViewPage
#using System.Web.Mvc.Html;
#using Umbraco.Cms.Web;
#{
Layout = "";
}
</body>
</html>
Anyone any ideas what could be the cause? It's as though the browsers think it is rendering something before the doctype but there is nothing I can see.
Thanks
You don't need a semi-colon on your #using statements, perhaps this is what the browser is seeing?
So e.g.
#using Umbraco.Cms.Web;
can just be
#using Umbraco.Cms.Web
Same here
It looks like that it places extra chars (whitespace) right before opening tag < of doctype. I think that it is an editor bug.
Try to remove the opening "<" and insert it back and save after that. also doctype should be 1st line of the file.
The # statements are translated to whitespace. The doctype is expected to be the first line of the document. In this case, the first line is blank, so the doctype is defined as an empty line, which triggers quirksmode.
Related
Html-agility-pack seems to build nodes from elements within TextArea, which are not real nodes.
For example:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1255">
<title>Sample</title>
</head>
<body>
<TEXTAREA>Text in the <div>hello</div>area</TEXTAREA>
</body>
</html>
This will yield a child-node of "div" under the "textarea".
Browsers will treat everything as text.
Is there a way to compel html-agility-pack to behave the same way?
Clarification
I don't want the node to be created in the first place. If I run doc.DocumentNode.SelectNodes("//div") I want this to yield nothing. Right now I have to use doc.DocumentNode.SelectNodes("//div [not(ancestor::textarea]") but I have to do this for every select I perform to avoid phantom nodes.
Any ideas?
Use the InnerText property to get just the text of a node. This also gets the text of any child nodes (in this case the div).
var textArea = doc.DocumentNode.SelectSingleNode("//textarea");
string text = textArea.InnerText;
Issue has been fixed by the kind folks at zzzprojects.
Fix available and tested on version 1.8.2.
You can see the ticket here: Issue 183
While using Firefox (23.0.1) and jQuery Mobile (1.3.2), I get the following warning from my code: Empty string passed to getElementById(). The message appears in the console (Tools > Web Developer > Web Console). I would like to eliminate this warning.
I have seen a number of people ask similar questions, most notably: Best way to locate source of Warning: Empty string passed to getElementById() The answers seems to fairly consistently point to the use of '#', implying the user is at fault.
I have tried to produce what I feel is the bare minimum of valid code, and I've found this warning is still exhibited. I assume, from the other posts, that it is my code that is at fault. Can anyone show me how to fix this issue?
As per other users' comments, this warning does not appear in Chrome (version 29.0.1547.57)
Thanks in advance!
Minimum valid code that reproduces this issue:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<title>Test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.css" />
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery.mobile-1.3.2.js"></script>
</head>
<body>
<div data-role="page" id="TestPage">
<div data-role="content" id="TestContent">
<p>This is a test</p>
</div>
</div>
</body>
</html>
In my case it was caused because I forgot to specify a value for the 'for' attribute of a label:
Missing id
<label for="">Stuff:</label>
fixed
<label for="someID">Stuff:</label>
EDIT: Removing the for attribute also prevents that warning
<label>Stuff:</label>
As indicated in a deleted answer and in the comments, this was a bug in Mobile jQuery and it's now fixed. Compare the behavior of 1.3.2 vs 1.4.5 (the current version):
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<title>Test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--link rel="stylesheet" href="https://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /-->
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
<!--script src="https://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.js"></script-->
</head>
<body>
<div data-role="page" id="TestPage">
<div data-role="content" id="TestContent">
<p>This is a test</p>
</div>
</div>
</body>
</html>
After going through your jsfiddle I still didn't get where the the function document.getElementById() is being called. I used to also face this problem, but since you are using jquery-mobile its better to use $(#id) as selector just check whether this reference document.getElementById() or $('#id') is being called before the DOM is ready..
I have a problem when opening a HTML table in OpenOffice or LibreOffice if it contains UTF8 extended characters like ÅÄÖåäö.
When opening the table into M$ Excel it works as intended but I can't make OO do the same thing.
By converting all extended characters to its HTML entity eqivalent Å etc. it works but it would be nice to get the correct characters directly.
Is there anyone who knows what I should do?
The following content I have in a file called excelsample.xls and if I open that with OO Calc it will not look nice.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="application/vnd.ms-excel" charset="UTF-8">
<meta charset="UTF-8">
</head>
<body>
<table>
<tr>
<td>Prawn sandwich</td><td>Räksmörgås</td>
</tr>
</table>
</body>
</html>
Your meta tag is malformed and OO doesn't probably recognize the html5 charset tag.
So fix it with:
<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">
Given a view with layout, how can I load static files (CSS and JS, essentially) into the <head> from the view file?
layout.html
<!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" xml:lang="{{=T.accepted_language or 'en'}}">
<head>
<title>{{=response.title or request.application}}</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- include requires CSS files
{{response.files.append(URL(request.application,'static','base.css'))}}
{{response.files.append(URL(request.application,'static','ez-plug-min.css'))}}
-->
{{include 'web2py_ajax.html'}}
</head>
<body>
{{include}}
</body>
</html>
myview.html
{{extend 'layout.html'}}
{{response.files.append(URL(r=request,c='static',f='myview.css'))}}
<h1>Some header</h1>
<div>
some content
</div>
In the above example, the "myview.css" file is either ignored by web2py or stripped out by the browser.
So what is the best way to load page-specific files like this CSS file? I'd rather not stuff all my static files into my layout.
In myview.html reverse the first two lines
{{response.files.append(URL(r=request,c='static',f='myview.css'))}}
{{extend 'layout.html'}}
Mind that 1.78.1 and 1.78.2 had a bug did not allow this to work. It was fixed in 1.78.3 on the same day. The response.file.append(...) can also be moved in the controller action that needs it. You are not supposed to put logic before extend but you define variables to be passed to the extended view.
The project I work on takes random HTML files, converts them to XHTML as best as it can, and wraps them with some XML metdata. The DOCTYPE is stripped out as the resulting XML file is not an XHTML document. However when retrieving the wrapped XHTML from the XML file the DOCTYPE should be reinserted.
Because these are random HTML files they could contain any content, but I would prefer to not have to store or determine the original DTD. I figured that I should the Frameset DTD as it was just a superset of the Transitional DTD and would be valid for all content. However when using the W3C XHTML Validator with the same document, using the Transitional DTD passes but using the Frameset DTD fails.
I've stripped down the document to the minimum with which I can reproduce the problem. Here is the Frameset version:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:html="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Make The Move</title>
</head>
<body style="background: none;">
<h3 id="why">Why should I move to Linux?</h3>
</body>
</html>
And here is the Transitional version:
<!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" xmlns:html="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Make The Move</title>
</head>
<body style="background: none;">
<h3 id="why">Why should I move to Linux?</h3>
</body>
</html>
Please explain why this is happening, and how I should proceed.
Frameset DTD is not a 'superset' of transitional. It is a special DTD only used for laying out frames, not content (except inside <noframes> tag). It allows only <head> and <frameset> as the children of <html> tag.
Here is the specification.
Unless you know your page could have frames, stick to transitional or strict DTDs.
As Chetan pointed out, the Frameset DTD should only be used in case you need frames, and even then, I would recomend on using Transitional instead. If you don't rely on frames, Strict is the way to go.