CSS applied to XML elements?

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

C.W.Holeman II - 24 Apr 2007 04:35 GMT

Using:

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.3)
Gecko/20070309 Firefox/2.0.0.3

http://emle.sourceforge.net/emle020000/teste1.xml
http://emle.sourceforge.net/emle020000/teste1.xsl

<style type="text/css">.boxed {border-style:solid;}</style>
...
<span class="boxed">HTML.</span>
<emleo:test class="boxed">NS.</emleo:test>
<test class="boxed">Test.</test>

The first and third elements are displayed with surrounding box.
How do I get the second element to have the box around it?

Signature

C.W.Holeman II | cwhii@Julian5Locals.com -5 | http://JulianLocals.com/cwhii
To only a fraction of the human race does God give the privilege of
earning one's bread doing what one would have gladly pursued free, for
passion. I am very thankful. The Mythical Man-Month Epilogue/F.P.Brooks

Reply to this Message

Andy Dingley - 24 Apr 2007 12:07 GMT

On 24 Apr, 05:28, "C.W.Holeman II" <cwhii_google_s...@yahoo.com>
wrote:

> How do I get the second element to have the box around it?

Decide what you're trying to achieve first.

You have an XML document, some XSLT and some CSS.
Are you planning to apply CSS to the XML to display it?
Or are you going to use the XSLT to transform the XML into HTML, then
applly the CSS to that? (probably best)

As it is, you're generating some chimera document that's half HTML and
half XML. It looks like HTML but it has an unrecognised XML element in
it <emleo:test class="boxed">NS.</emleo:test>
This is invalid HTML, so the browser chokes on it. The usual recovery
mechanism is to discard the unrecognised element and try to process
the content as if the tags hadn't been there. So the text content is
still rendered, but the element (and the associated class and thus the
CSS border) gets ignored.

Reply to this Message

C.W.Holeman II - 24 Apr 2007 14:55 GMT

> On 24 Apr, 05:28, "C.W.Holeman II" <cwhii_google_s...@yahoo.com>
> wrote:
[quoted text clipped - 7 lines]
> Or are you going to use the XSLT to transform the XML into HTML, then
> applly the CSS to that? (probably best)

Yes, the later with the output including also MATHML, SVG and my EMLEO.

> As it is, you're generating some chimera document that's half HTML and
> half XML. It looks like HTML but it has an unrecognised XML element in
> it <emleo:test class="boxed">NS.</emleo:test>

The unrecognised element is what I am trying to get into output document.
Then I will have javascript process user input and change the DOM
content.

http://emle.sourceforge.net/index.shtml
http://emle.sourceforge.net/emle020000/emle_lab_009.xml

The above link has the the XML file transformed by the XSL file into
a document that has no MATHML nor SVG at this point. There is javascript
code that modifies a canvas at this point. I am now attempting to
add CSS to manage the look which has provoked this test case.

> This is invalid HTML, so the browser chokes on it. The usual recovery
> mechanism is to discard the unrecognised element and try to process
> the content as if the tags hadn't been there. So the text content is
> still rendered, but the element (and the associated class and thus the
> CSS border) gets ignored.

Then why does <test class="boxed"> work as expected but not <emleo:test
class="boxed">?

Signature

Reply to this Message

Martin Honnen - 24 Apr 2007 13:56 GMT

> Using:
>
[quoted text clipped - 12 lines]
> The first and third elements are displayed with surrounding box.
> How do I get the second element to have the box around it?

The class attribute respectively the dot notation (e.g. .boxed) is
something that is defined for HTML and XHTML elements but not for
general XML elements, see
<http://www.w3.org/TR/CSS21/selector.html#class-html>
For general XML elements you need to use element-name[class~=boxed].

Signature

Martin Honnen
http://JavaScript.FAQTs.com/

Reply to this Message

C.W.Holeman II - 24 Apr 2007 14:55 GMT

>> Using:
>>
[quoted text clipped - 18 lines]
> <http://www.w3.org/TR/CSS21/selector.html#class-html>
> For general XML elements you need to use element-name[class~=boxed].

That worked:

*[class~=boxed]{border-style:solid;}

Modified version at:

http://emle.sourceforge.net/emle020000/teste2.xml
http://emle.sourceforge.net/emle020000/teste2.xsl

Thanks again.

Signature

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / April 2007

CSS applied to XML elements?