I can't figure out how to get CSS attribute selectors to style elements based on namespaced attributes without resorting to the ordinary HTML name of the namespaced attribute (including the colon).
Example:
<!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:foo="https://stackoverflow.com/foo">
<head>
<title>CSS Attribute Selectors with namespaces</title>
<style>
#namespace foo "http://www.stackoverflow.com/foo";
span[foo|id=bar] { font-family: monospace; font-weight: bold; }
</style>
</head>
<body>
<span foo:id="bar">Should be monospace bold</span>
</body>
</html>
Test case:
I opened the file in both Chrome and Firefox by typing the appropriate file:/// URL into my address bar; in neither case does it show up correctly. It also does not show up correctly on Stack Overflow.
If I change the snippet to include the HTML attribute name:
<!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:foo="https://stackoverflow.com/foo">
<head>
<title>CSS Attribute Selectors with namespaces</title>
<style>
#namespace foo "http://www.stackoverflow.com/foo";
span[foo\:id=bar] { font-family: monospace; font-weight: bold; }
</style>
</head>
<body>
<span foo:id="bar">Should be monospace bold</span>
</body>
</html>
... it works correctly (both using my local browser and on the Stack Overflow snippet).
I've read the set of gotchas included in Can you style XHTML elements in another namespace using id and class name css selectors? and Do CSS namespace attribute selectors work with XHTML/HTML elements? but I have not yet been able to figure this out; I believe I've done everything both questions' answers suggest.
Removing the DOCTYPE didn't do it, although I suspect some kind of DOCTYPE problem given that the HTML form works and the XHTML form does not.
I must be missing something simple!
Your document needs to be processed as an XHTML document for the XML namespaces to work. Note that having an XHTML DOCTYPE and the relevant xmlns attributes is not enough.
You do this on the server side by serving the document as Content-Type: application/xhtml+xml, or on the file system by saving the document with a .xhtml file extension instead of .html. For a very quick and dirty test case you can even copy your entire markup, drop it in the address bar, prepend data:application/xhtml+xml,, and navigate to the resulting data URI.
This is mentioned in very brief passing by the first question you link to:
If I switched the mime-type to application/xhtml+xml
Note also that the namespace in your CSS must exactly match the namespace in the markup. #namespace foo "http://www.stackoverflow.com/foo"; does not match xmlns:foo="http://stackoverflow.com/foo" because of the www.. (Interestingly, the foo identifiers do not need to match, because unlike the namespaces themselves the identifiers are separate.)
Related
I've read several posts on this subject and I've tried many of them but I cannot get my website to be centered in IE - specifically IE 8 (my current browser). It does work in FF, Safari and Chrome. www.hscassociates.net is the site.
In my css I'm doing this:
div#section {
width:960px;
margin:0 auto 0 auto;
border: 2px solid #b31b1b;
border-top:none;
}
Also, I have a background image I need in my #section div, but it will not show when I place it in my css file in the div#section block. In order to get it to show, I put it inside the in my includes file where I am displaying the #section div tag:
<div id="section" style="background-image:url('graphics/section-bg.gif');
background-repeat:repeat-y;">
One post I read said the html doctype needed to be using strict. I've never read that before. Any truth to that? I'm using transitional.
Your DOCTYPE should be the first tag on your page. Because it is not IE is rendering your page in what is known as quirks mode. The DOCTYPE itself doesn't need to be strict but what will happen is with a correct DOCTYPE the page will be rendered in strict mode instead.
What is quirks mode?
Because certain old browsers didn't meet W3C standards developers had to write non-standards compliant code to ensure their pages looked correct in these browsers. As browsers came closer to the standard the problem was that pages developed in the old style would no longer render correctly. So they implemented two modes of rendering, quirks and strict.
If the website supplies a DOCTYPE as the first argument this tells the browser that the page is written in standards compliant code and what specification to render against. So the browser can use strict mode to render the page.
However if the page omits a DOCTYPE then the browser does not know what specification to render against and therefore assumes the page is non-standards compliant (Which it automatically is for omitting the DOCTYPE) and renders it in quirks mode which can have unexpected results.
Here's what you need to do:
Change
<html>
<head>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
to
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> triggers quirks mode.
If you want to use HTML 4 Transitional then use <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
If you are not bound to HTML 4 then use <!DOCTYPE html>
Your page displays fine with both.
I have an Website which is delivered with as xhtml (with header an doctype). I get data from the server which sometimes contains some entities what leads to an error when I try to set a string containing this via innerHTML. How I have already found out I can replace all of this items on serverside, but what I would like to know is:
Can I also add this entities to the doctype declaration instead of replacing it on server?
EDIT:
in other words, why does this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"
[
<!ENTITY nbsp " ">
]>
just not work?
Update 2:
From http://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml1 (2nd part on setting), the algorithm for XHTML does not seem to mention whether it is aware of the DOCTYPE information, though it is aware of the namespaces at least. (Note I switched to the simpler yet standards-compliant XHTML5 DOCTYPE.)
I think you might either provide the following test-case and report as a bug, or perhaps bring it up on the WhatWG mailing list, as I think the behavior should at least be spec'd(unless it is, and I am just not seeing it):
<!DOCTYPE html [
<!ENTITY nbsp " ">
]>
<html xmlns="http://www.w3.org/1999/xhtml">
<div id="a">old text</div>
<script><![CDATA[
document.getElementById('a').innerHTML = 'new text';
]]></script>
</html>
In the meantime, if you don't want to replace on the server, you could use such a hack as below with DOMParser():
<!DOCTYPE html [
<!ENTITY nbsp " ">
]>
<html xmlns="http://www.w3.org/1999/xhtml">
<div id="a">old text</div>
<script><![CDATA[
document.getElementById('a').innerHTML = new DOMParser().parseFromString(
'<!DOCTYPE html [<!ENTITY nbsp " ">]>'+
'<html xmlns="http://www.w3.org/1999/xhtml">'+
'new text'+
'</html>',
'application/xhtml+xml'
).documentElement.innerHTML;
]]></script>
</html>
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>
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
I am trying to extend an xhtml document to allow extra attributes.
In the w3.org it gives an example like so:
<!ATTLIST a
myattr CDATA #IMPLIED
>
See: 6.1. Defining additional attributes -
http://www.w3.org/TR/1999/xhtml-modularization-19990406/developing.html#s_dev_attrs
However i am not sure where to put that statement.
I have tried adding it like so:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<!ATTLIST a
myattr CDATA #IMPLIED
>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
...
</head>
<body>
...
</body>
But when I pick up the doc using DOM that extra DTD statement is ignored.
I have also tried:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" [
<!ATTLIST a
myattr CDATA #IMPLIED
>
]>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
...
</head>
<body>
...
</body>
But that really caused DOM to throw a wobbly.
So I'd appreciate it if someone could show me a sample xhtml document that has an additional attribute defined. (i.e minimal full doc that could validate)
As you might have guessed....xhtml is not my strong point.
Your second example is correct, apart from the missing </html> end-tag. With that added it parses OK for me. What exactly “throws a wobbly”?
The ATTLIST declaration must indeed go in the DTD, the internal subset of which is within square brackets inside the DOCTYPE declaration.
(What are you hoping to achieve with this? Browsers don't care, even if they are running in native application/xhtml+xml mode. In normal text/html tag soup mode the DTD internal subset will just confuse them.)