All the pages on the site I am designing are valid XHTML 1.0 Strict except for the home page which has a Google map link generated from My Maps
<div id="map">
<iframe src="https://www.google.com/maps/d/embed?mid=zBNEhg5_DRUg.ke97rR7SIh5I" width="320" height="240"></iframe>
</div>
The errors are:
there is no attribute "src"
there is no attribute "width"
there is no attribute "height"
element "iframe" undefined
Some of the articles I have read suggest replacing these with alternatives, but I'm not sure how.
Is there a reason not to use the map generator in Google?
To validate a google embedded map you need to not use an <iframe>, that isn't allowed in XHTML Strict. Instead use an <object> (reference: Why won't <iframe> elements validate in HTML 4.01?) and instead of src (which isn't supported), use data.
example that valids XHTML Strict 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>example embedded map</title>
</head>
<body>
<div>
<object width="600" height="450" style="border:0" data="https://www.google.com/maps/embed/v1/directions?key=API_key&origin=Bern&destination=Bern&waypoints=Paris%7CBerlin%7CRome"></object>
</div>
</body>
</html>
Related
I'm not sure why this is happening. I'm just setting up a basic site, I've barely added anything, but Chrome seems to think i'm trying to use frames?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
</head>
<body>
<div id="header">
<div id='logo'><img src='img/logo-black-thin.png' /></div>
</div><!--header-->
</body>
</html>
But for some reason in Chrome it creates a bunch of frameset tags and gives me this sentence in the html:
Your browser does not support frames. We recommend upgrading your browser.
I can't figure out why this is happening. Any ideas?
I need to embed a thirdparty webapp inside another HTML page. The problem is that this webapp includes calls to window.top so doesn't work inside my iframe.
For example in this code I want 'www.google.com' to load inside the iframe without changing the code of 'FramePage.html':
<!--ParentPage.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">
<head>
<title></title>
</head>
<body>
Parent Page
<iframe src="FramePage.html" sandbox></iframe>
</body>
</html>
<!--FramePage.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">
<head>
<title></title>
</head>
<body>
FRAME
hello
</body>
</html>
If you switch to HTML5 instead of the (quite outdated) transitional doctype you're currently using, you can use the "sandbox" attribute to your <iframe> which among other things disables the ability of an iframe to change the location of the framing page. (I do see you have that attribute in place already, but it will have no effect in pre-HTML5 documents.)
The options for the "sandbox" property are here. (All of them reduce the amount of restrictions placed on the framed site; if all you want is to prevent window.top navigation, include all the options except "allow-top-navigation".)
This will not create the behavior you want, though: it will cause those target="_top" links to simply not work at all, instead of causing them to stay inside the frame.
Beyond this, it is not possible to change the functionality of a framed third-party site that you don't control.
Hi all:
I want to get the autual height of the web browser,but I got some confusions about the W3C DTD HTML 4.01 and //W3C//DTC XHTML 1.0,below is my issue detail:
If I am using W3C DTD HTML 4.01 at the top of the page header and use document.body.clientHeight,then I can not get the full height of the browser:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test jQuery Height</title>
<script type="text/javascript" src="../lib/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
var height=document.body.clientHeight;
alert(height);
})
</script>
</head>
<body>
<div style="margin-left:30px;">
<button>Start Select</button>
<button>Stop Select7lt;/button>
</div>
</body>
</html>
But if I change to //W3C//DTD HTML 4.01 or use document.documentElement.clientHeight,then I could get the actual height of the browser:
1. Using //W3C//DTD HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test jQuery Height</title>
<script type="text/javascript" src="../lib/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
var height=document.body.clientHeight;
alert(height);
})
</script>
</head>
<body>
<div style="margin-left:30px;">
<button>Start Select</button>
<button>Stop Select7lt;/button>
</div>
</body>
</html>
Using document.documentElement.clientHeight
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test jQuery Height</title>
<script type="text/javascript" src="../lib/jquery-1.8.3.min.js">
</script>
<script type="text/javascript">
$(function(){
var height=document.documentElement.clientHeight;
alert(height);
})
</script>
</head>
<body>
<div style="margin-left:30px;">
<button>Start Select</button>
<button>Stop Select7lt;/button>
</div>
</body>
</html>
So,my question is What's the difference between "//W3C//DTD HTML 4.01" and "//W3C//DTD XHTML 1.0"?
Any help will be grateful!
The difference between “//W3C//DTD HTML 4.01” and “//W3C//DTD XHTML 1.0” is that the former has “HTML 4.01” as opposite to “XHTML 1.0” in the latter.
What you have actually observed is the difference between the two document type declarations
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
and
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
The former puts browsers to “standards mode”, whereas the latter puts them to “quirks mode”. In quirks mode, strange things may and will happen. This may include nonstandard calculation of widths and heights.
Unless this is about a legacy page that relies on quirks mode, you should use “standards mode” and use CSS and DOM by the specifications.
The HTML 4.01 strict doc type i.e "-//W3C//DTD HTML 4.01//" , validates against the HTML 4.01 spec, although it doesn't allow any presentation markup or deprecated elements (such as font elements) or framesets to be used. It validates loose HTML style markup, such as minimized attributes and non-quoted attributes (eg required, rather than required="required")
The HTML 4.01 transitional doc type i.e "-//W3C//DTD HTML 4.01 Transitional//EN" validates against the HTML 4.01 spec. It allows some presentation markup and deprecated elements (such as font elements) but not framesets. Again, it validates loose HTML style markup
These are the exact XHTML 1.0 equivalents of the HTML 4.01 doctypes i.e "-//W3C//DTD XHTML 1.0 Transitional//EN" or "-//W3C//DTD XHTML 1.0 Strict//EN" we discussed above, so functionally they are the same, except that they won't validate loose HTML style markup: it all needs to be well formed XML.
Here is a good comparison of these two document standards: http://www.w3.org/TR/xhtml1/diffs.html
In short: with XHTML you have to follow the XML structure, just as with any other XML document. HTML4 Transitional is more flexible and allows e.g. usage of additional attributes in tags or skipping of some attributes.
EDIT:
document.documentElement seems to work in IE standard mode
document.body in IE quirks mode and all other browsers I usually use.
document.body is more of a standard than the other one. But it does not relate to the (X)HTML standard.
I am building a website with a Google Map, which by default generates this code:
<iframe width="550" height="500" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.co.uk/maps?f=q&source=s_q&hl=en&geocode=&q=Amber,+115+Portswood+Road,+Southampton,+SO17+2FX,+United+Kingdom&aq=0&sll=50.923556,-1.394663&sspn=0.006709,0.01929&vpsrc=6&ie=UTF8&hq=Amber,&hnear=115+Portswood+Rd,+Southampton+SO17+2,+United+Kingdom&t=m&ll=50.923178,-1.393676&spn=0.012985,0.027466&z=15&output=embed"></iframe><br /><small>View Larger Map</small>
Now this throws an error when checked for XHTML Strict, as it is Frames which are outdated, but what should I use instead?
Thanks for the help
If you must have a Maps iframe on your page, the easiest solution is to change your doctype to XHTML 1.0 Transitional instead, which permits the use of iframes:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
However if you start to see any differences in page rendering (see standards mode vs almost standards mode), and you're more concerned about how your site looks in web browsers than validating your markup, just keep the XHTML 1.0 Strict doctype. Browsers won't error out simply because a page is invalid XHTML; they'll handle your iframe just fine either way.
There exists a dirty trick with Javascript:
function load()
{
document.getElementById("ramec").innerHTML = '<iframe class="ramec"></iframe>';
}
and:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cs" lang="cs">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="yourjshere.js">
</script>
<title></title>
</head>
<body onload="load()">
<div id="ramec">
</div>
</body>
</html>
The document in the first link validates as XHTML1.0 Strict, although it uses iframe inside (try the links inside the document). The important part is that Javascript which puts iframe into the document is external.
I'm not sure if it worth all the effort. Maybe changing to HTML4.1 Strict document type would be much more helpful there (the rendering of page would be the same as with XHTML1.0 Strict).
An object tag performs the same function, no hacks required. Just change the "src" attribute to "data" and add type="text/html".
<object width="550" height="500" data="http://maps.google.co.uk/maps?f=q&source=s_q&hl=en&geocode=&q=Amber,+115+Portswood+Road,+Southampton,+SO17+2FX,+United+Kingdom&aq=0&sll=50.923556,-1.394663&sspn=0.006709,0.01929&vpsrc=6&ie=UTF8&hq=Amber,&hnear=115+Portswood+Rd,+Southampton+SO17+2,+United+Kingdom&t=m&ll=50.923178,-1.393676&spn=0.012985,0.027466&z=15&output=embed" type="text/html"></object>
I am using few facebook social plugins and I am using the meta header. When validating the page, the W3C validator is throwing the error -> "Error: there is no attribute "property".
I am using the XHTML Transitional doctype - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Pls Suggest if I have to change the doctype to something else.
Facebook's plugins use Open Graph, which is built on RDFa. It's RDFa that adds the property attribute to elements. Without this addition, plain HTML has no such attribute. (If you ask me, it's a strange design to add a new attribute without namespacing it, and to re-use half of a <meta> tag. But no-one did.)
To validate XHTML-with-RDFa, you'll need the DOCTYPE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
This means you will have to be writing valid XHTML 1.1. More
In order for a document to claim that it is a conforming HTML+RDFa document, it must provide the facilities described as mandatory in this section. The document conformance criteria are listed below, of which only a subset are mandatory:
All document conformance requirements stated as mandatory in the HTML5 specification must be met.
There should be a version attribute on the html element. The value of the version attribute should be HTML+RDFa 1.0 if the document is a non-XML mode document, or XHTML+RDFa 1.0 if the document is a XML mode document.
There may be a link element contained in the head element that contains profile for the the rel attribute and http://www.w3.org/1999/xhtml/vocab for the href attribute.
Example:
<html version="HTML+RDFa 1.1" lang="en">
<head>
<title>Example Document</title>
</head>
<body>
<p>Moved to example.org.</p>
</body>
</html>
As Open Graph suggests, if you're using HTML5, you're better off just using a prefix attribute like this:
<!doctype html>
<html prefix="og: http://ogp.me/ns#">
<head>
<title>HTML5 site</title>
<meta property="og:title" content="The Rock" />
</head>
<body>
</body>
</html>
You can leave the doctype as is and it will validate.
This approach has also been recommended by an Open Graph developer.