CSS for XML in Firefox

I always assumed that XML was not stylable in normal HTML documents, it being unable to conform to the HTML DTD. I tried in Internet Explorer a long time ago, and found out that XSLT was the only way to do this. And that is too bad, since it requires a lot more thought.

I was very surprised when at one time I accidentally threw generated XML into an XHTML document, and the content actually showed with a lot of errors and warning, but displaying nonetheless. I applied styles, and hey, it works!

In Opera and IE nothing shows up.

Here’s an example, HTML mixed with CSS first (I cannot use the source code tag here, due to WordPress.com censoring of my tags).

<title>CSS for XML</title>

<h1>This is an example of mixing CSS and XML</h1>

<xml>

 <language>

  <name>php</php>

  <version>5.0</version>

 </language>

 <language>

  <name>javascript</php>

  <version>1.3</version>

 </language>

 <language>

  <name>python</php>

  <version>1.0</version>

 </language>

 <language>

  <name>ruby</php>

  <version>1.0</version>

</language>

</xml>

And here’s the styling

language {
float:left;
width: 8em;
height: 3em;
border:.3em solid #09f;
margin-left:2em;
padding:10px;
background: #06f;
color: white;
text-transform:uppercase;
text-align:center;
-moz-border-radius: 1em 1em 1em 1em;
}
version {
clear:both;
display:block;
text-align:center;
font-size:.9em;
color: #000;
background-color: white;
-moz-border-radius: 1em 1em 1em 1em;
}

Advertisements

No comments yet

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: