To my eyes, this should be a valid XHTML document:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<a:html xmlns:a="http://www.w3.org/1999/xhtml">
<a:head>
<a:title>Document title</a:title>
</a:head>
<a:body>
<a:h1>Hello World!</a:h1>
</a:body>
</a:html>
However, it is not handled like XHTML by neither Firefox nor Internet Explorer, instead showing as text (with tags not visible). If I remove the namespace prefix…
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Document title</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
… it is rendered fine. I would have thought that both documents are semantically equal. Why does the first one not work?
You have to make sure that browsers get the hint to interpret the document as application/xhtml+xml (or possibly one of the other XML MIME types) instead of text/html.
On a server, you can achieve this by sending the corresponding Content-Type HTTP header:
Content-Type: application/xhtml+xml
Locally, you can typically achieve this by using .xhtml instead of .html as file extension (but this might depend on your system).
Related
Using xslt to generate web-content (QXmlQuery), the resulting xhtml page has self-closed tags, which I am unable to make browsers to understand.
The problem relates with major browsers keeping parsing the self-closed tag as if it was HTML5, thus, including following content inside the self-closed tag.
Example:
<a><xsl:attribute name="name"><xsl:value-of select="#title"/></xsl:attribute></a>
Will generate content like:
<?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">
...
<a name="Intro"/>
Some content
Which is then interpreted in the browser as:
<a name="Intro">Some content</a>
A trivial, but not elegant solution is to add a comment:
<a><xsl:attribute name="name"><xsl:value-of select="#title"/></xsl:attribute><xsl:comment/></a>
I would like to understand the problem:
Is xhtml deprecated? If this is the case, then xslt for web generation is deprecated too?
If not deprecated, how to enable proper parsing of xhtml for modern browsers? (with proper, I mean with support for self-closed tags).
I tried several DOCTYPEs, and looked about the possible xslt deprecation without results. But I have to admit that I have been out of web development for a while, forgive me if this is a trivial question.
Full example:
<?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">
<head>
<title>Title</title>
</head>
<body>
<div>
<span/>
Dummy content
</div>
</body>
</html>
Which can be seen with "Dummy content" wrongly inside span
The raw XHTML is just displaying in internet explorer. No CSS is shown at all. I can't seem to pinpoint the issue of this problem. I ran both my XHTML and CSS through the W3C validators and had zero errors checked with XHTML 1.0 Strict and CSS 2.1.
I suspect the something to do with my DOCTYPE or the <link> in my XHTML. Any help is appreciated!
XHTML (DOCTYPE and HEAD):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- DOCTYPE is set to STRICT-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Flags</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="Flags.css" type="text/css" />
</head>
</html>
Page in:
Internet Explorer: http://i.imgur.com/l2jcUkv.png
Chrome: http://i.imgur.com/tucKXzg.png
Notes: The CSS is called Flags.css and is located in the same directory as the XHTML.
Check the developer tools in Internet Explorer. Are you using the correct mime for your CSS? What about headers you've set?
Remove the meta element, it is not only invalid it's completely out of context for XHTML; you are setting the mime to application/xhtml+xml right?
Never use capitol letters for files unless they are intended as an explicit download-only resource; all web resources must be lower case as part of your good practices (and use dashes for public facing URLs, never underscores; research correct context of characters on Wikipedia).
Finally you're lacking the media attribute with the screen value...
<?php
if (isset($_SERVER['HTTP_ACCEPT']) && stristr($_SERVER['HTTP_ACCEPT'],'application/xhtml+xml'))
{
header('Content-Type: application/xhtml+xml; charset=utf-8');
}
echo '<?xml version="1.0" encoding="UTF-8"?>'."\n";
?>
<!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>
<title>Flags</title>
<link href="flags.css" media="screen" rel="stylesheet" type="text/css" />
</head>
<body>
</body>
</html>
My entire site is proper XHTML (1.1 currently, converting to XHTML5 for the next version release) so feel free to look at it linked from my user profile.
The issue I am encountering is exactly what the title of this question says, conditional comments on my page only work if the extension is html.
If this is saved as an xhtml file, the conditional comments don't work and the page displays "Not internet explorer" regardless of browser. However, when the file is renamed to html, everything functions normally. This wouldn't be an issue, except the page is required to be an xhtml file.
Here's a minimal amount of code that reproduces the problem:
<!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>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>Title</title>
</head>
<body>
<!--[if IE]>Internet explorer<![endif]-->
<!--[if !IE]>-->Not internet explorer<!--<![endif]-->
</body>
</html>
The only thing that I could find through testing and searching for a few hours on Google and this site is the second line which unfortunately didn't do anything.
You're testing in IE9 right?
This is something that only happens when you test the file locally. If you tested the page via a web server you would find that conditional comments work fine regardless of the file extension.
The reason is that accessing a file locally with a .xhtml extension in IE9 (or other makes of browser, but not IE8 or earlier) is equivalent to serving the page with a application/xhtml+xml content type.
That is, IE9 is processing the file as "true" XHTML. Normally, XHTML files are served with a text/html content type, and therefore are processed as HTML not XHTML.
True XHTML requires that the markup is parsed using and XML parser. The XML parsing rules are very strict, and do not allow for nasty hacks like conditional comments, so IE9 in application/xhtml+xml mode does not, and indeed cannot, support them.
You can use this code after including jquery library and in this way your xhtml will work in the same way than html page.
<script type="text/javascript">//<![CDATA[
var div = document.createElement("div");
div.innerHTML = "<!--[if IE 8]><i></i><![endif]-->";
var isIE8 = (div.getElementsByTagName("i").length == 1);
div.innerHTML = "<!--[if IE 9]><i></i><![endif]-->";
var isIE9 = (div.getElementsByTagName("i").length == 1);
if (isIE8) {
$('html').addClass('ie').addClass('ie8');
} else
if (isIE9) {
$('html').addClass('ie').addClass('ie9');
}
//]]>
</script>
how do i implement css in xsl file? i tried this:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<link rel="stylesheet" type="text/css" href="dxsl.css"/>
<xsl:output method="html" />
but it threw the error:
XSLTProcessor::importStylesheet(): Found a top-level element link with null namespace URI
and
Warning: XSLTProcessor::transformToXml(): No stylesheet associated to this object
Your html (link tag) must be inside an xsl:template. The xsl:template must be inside an xsl:stylesheet.
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" />
<xsl:template match="/*//*[1]">
<link rel="stylesheet" type="text/css" href="dxsl.css"/>
</xsl:template>
</xsl:stylesheet>
If I understand you correctly, you wish for the output to have a particular stylesheet?
XSL is a language used to transform XML from one format to another (in a sense it's like applying a css stylesheet). What would happen in a typical use case is that you would take some xml file and use XSL to transform it, say to XHTML. In this output, you can include a stylesheet using the link element if you wanted, but XSL doesnt really make use of CSS as such. (So basically, try putting the CSS in the XSL as part of the transformation to have the XHTML output use it.)
If this is an XML document you simply need to include the reference to the XSL and it should handle the transformation for you automatically.
'link' is a HTML element and you're trying to use it as an XML one. XSL modifies input into another document. You don't use CSS in an XSL file. You insert it into an (X)HTML file and apply it there.
As another answer said, the link must be generated by the transform. Here's an example that generates a small HTML doc with link to CSS from a simple xml doc. The css path comes from the data as well.
Try this
When I tried to convert my website to xhtml, things went perfectly until I realized that IE doesn't support it.
I went to the xhtml FAQ's section about IE, and tried out the workaround there, using an identity transformation to trick IE into rendering it as html in quirks mode. Unfortunately, this seems to make firefox (and possibly other browsers?) display the css background only over the text of the page.
So here is the code:
test.xhtml:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="copy.xsl"?>
<!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>
<link rel="stylesheet" type="text/css" href="backgroundexample.css" />
</head>
<body>
<h1>This is a heading.</h1>
<p>This is a paragraph.</p>
</body>
</html>
backgroundexample.css:
body {
background-color:red;
}
copy.xsl:
<stylesheet version="1.0"
xmlns="http://www.w3.org/1999/XSL/Transform">
<template match="/">
<copy-of select="."/>
</template>
</stylesheet>
The effect of this is that the background only displays over the text, not the whole page.
I could not find the problem here or by googling, so please tell me if this has already been asked (and i am therefore bad at searching).
Can't verify your problem. Did you have tried something like this?
html, body {
background-color:red;
}