iframes not valid in XHTML Strict - html

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>

Related

HTML sandboxed iframe - redirect parent call to the same iframe

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.

W3 validator validates XHTML page but now page is empty

So, I wanted to be strict on me and took one of HTML5 pages and validated it as XHTML Strict -- all the way.
Fixed every error reading the very helpful error messages. Now the entire page is fully XHTML compliant. But the page shows only the DIVS containing the ads. The main DIV containing the page matter is gone, haha!
Here's the page for your enjoyment:
http://mypollingcenter.com/charts1.htm
Well, I apologize. The problem was that in my over-zealousness, I changed
this line:
<script src="../avazyabadu/kramaanukrama.js" type="text/javascript"></script>
to this:
<script src="../avazyabadu/kramaanukrama.js" type="text/javascript"/>
Empty tag/element rule, you know.
So, the validator took the whole thing as JavaScript, maybe?
Lessons I learned:
That JavaScript external file reference is an exception to the XHTML/XML rule. Keep the closing tag.
The “space before slash” rule is no more with XHTML.
Mark up fully compliant with strict XHTML validate as HTML5, provided you switch headings as below.
XHTML does not need character set declaration if your page is in UTF-8
Use this Validator (Not this one)
XHTML top lines:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
HTML top lines:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">

W3C validation errors with embedded google map

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>

XHTML 1.0 Strict - div align="center" still working?

I'm playing around with the doctypes to find the best one for me. I'm thinking about to use XHTML 1.0 strict, because it shouldn't accept the deprecated elements and attributes.
To test the behaviour, I created an html page with the following content:
<!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 runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<div align="center">
Some Text
</div>
</body>
</html>
When I open this with Firefox the div has 100% width (which is ok) and it's text is aligned to center (which is not ok, the align attribute isn't supposed to work anymore).
Can someone explain why this is happening? Am I doing something wrong or are some deprecated attributes still accepted in strict mode?
Doctype switching triggered Standards Mode has nothing to do with enforcing lack of support for deprecated/removed attributes. Most of the effects it has are on disabling the emulation of bugs (such as incorrect handing of width and assuming integer values are pixel values) in CSS support.
Use a validator to detect when you are using a deprecated HTML feature.

What does "<html xmlns="http://www.w3.org/1999/xhtml">" do?

I can't believe what is happening in my website. When I add this line:
<html xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE html>
<html>
<head>
Everything works fine. And when I don't, CSS "messes" up, everything becomes different and layout becomes "ugly".
How can this line solve all the problems?!
You're mixing up HTML with XHTML.
Usually a <!DOCTYPE> declaration is used to distinguish between versions of HTMLish languages (in this case, HTML or XHTML).
Different markup languages will behave differently. My favorite example is height:100%. Look at the following in a browser:
XHTML
<!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="en" lang="en">
<head>
<style type="text/css">
table { height:100%;background:yellow; }
</style>
</head>
<body>
<table>
<tbody>
<tr><td>How tall is this?</td></tr>
</tbody>
</table>
</body>
</html>
... and compare it to the following: (note the conspicuous lack of a <!DOCTYPE> declaration)
HTML (quirks mode)
<html>
<head>
<style type="text/css">
table { height:100%;background:yellow; }
</style>
</head>
<body>
<table>
<tbody>
<tr><td>How tall is this?</td></tr>
</tbody>
</table>
</body>
</html>
You'll notice that the height of the table is drastically different, and the only difference between the 2 documents is the type of markup!
That's nice... now, what does <html xmlns="http://www.w3.org/1999/xhtml"> do?
That doesn't answer your question though. Technically, the xmlns attribute is used by the root element of an XHTML document: (according to Wikipedia)
The root element of an XHTML document must be html, and must contain an xmlns attribute to associate it with the XHTML namespace.
You see, it's important to understand that XHTML isn't HTML but XML - a very different creature. (ok, a kind of different creature) The xmlns attribute is just one of those things the document needs to be valid XML. Why? Because someone working on the standard said so ;) (you can read more about XML namespaces on Wikipedia but I'm omitting that info 'cause it's not actually relevant to your question!)
But then why is <html xmlns="http://www.w3.org/1999/xhtml"> fixing the CSS?
If structuring your document like so... (as you suggest in your comment)
<html xmlns="http://www.w3.org/1999/xhtml">
<!DOCTYPE html>
<html>
<head>
[...]
... is fixing your document, it leads me to believe that you don't know that much about CSS and HTML (no offense!) and that the truth is that without <html xmlns="http://www.w3.org/1999/xhtml"> it's behaving normally and with <html xmlns="http://www.w3.org/1999/xhtml"> it's not - and you just think it is, because you're used to writing invalid HTML and thus working in quirks mode.
The above example I provided is an example of that same problem; most people think height:100% should result in the height of the <table> being the whole window, and that the DOCTYPE is actually breaking their CSS... but that's not really the case; rather, they just don't understand that they need to add a html, body { height:100%; } CSS rule to achieve their desired effect.
Its an XML namespace. It is required when you use XHTML 1.0 or 1.1 doctypes or application/xhtml+xml mimetypes.
You should be using HTML5 doctype, then you don't need it for text/html. Better start from template like this :
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>domcument title</title>
<link rel="stylesheet" href="/stylesheet.css" type="text/css" />
</head>
<body>
<!-- your html content -->
<script src="/script.js"></script>
</body>
</html>
When you have put your Doctype straight - do and validate you html and your css . That usually will sove you layout issues.
It sounds like your site has CSS or JS that depends on running in quirks mode. Which is why you need garbage above your doctype to render "correctly". I suggest removing said garbage and then fixing your CSS+JS to actually work in standards mode; you'll save yourself a lot of pain in the long run.
The namespace name http://www.w3.org/1999/xhtml
is intended for use in various specifications such as:
Recommendations:
XHTML™ 1.0: The Extensible HyperText Markup Language
XHTML Modularization
XHTML 1.1
XHTML Basic
XHTML Print
XHTML+RDFa
Check here for more detail