CSS applied to XML elements?

C.W.Holeman II

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?

--
C.W.Holeman II | cw***@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

Apr 24 '07 #1

Andy Dingley

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.

Apr 24 '07 #2

Martin Honnen

C.W.Holeman II wrote:

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?

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].

--

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

Apr 24 '07 #3

C.W.Holeman II

"Andy Dingley" <di*****@codesmiths.comwrote in message
news:11*********************@c18g2000prb.googlegro ups.com...

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)

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">?

--
C.W.Holeman II | cw***@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

Apr 24 '07 #4

C.W.Holeman II

"Martin Honnen" <ma*******@yahoo.dewrote in message
news:46***********************@newsspool1.arcor-online.net...

C.W.Holeman II wrote:

>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?

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].

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.

--
C.W.Holeman II | cw***@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

Apr 24 '07 #5