Calling an XSLT Variable into a css ducument

[jjones]

Hey,

I am currently working with CSS to style XSLT documents, which are basically xhtml pages combined with xsl code. Anyway, in XSL you can create a variable with this code;

<xsl:variable name="imageDir" select="'imagePath'" />

You can then call this variable anywhere in you xslt document with the code;

{$imagePath}

An example of using this would be:

<img href="{$imageDir}/imageone.gif" /> which would yield the code <img href="imagePath/imageone.gif" /> to the browser.

So I am trying to pull this variable into my CSS stylesheet like so;

.table { background-image: url('{$commonImages}key.gif); }

However the CSS stylesheet is having a problem with the '{}' characters inside the declaration.

Any ideas?

[Nick_W]

Hi, Welcome to WebmasterWorld! [webmasterworld.com]

I'm afraid I know next to nothing on XSLT other than it annoys me that I've never experimented with it ;)

Any XML/XSLT experts out there?

Nick

[SuzyUK]

I'm no expert either but have started "experimenting" when time permits

My best guess is that you need to write your stylesheet as an XML document then somehow transform it, server side, so the browser interprets it as a CSS document.

I found this [xmlfiles.com] which may help..

or it could it be simply saving your stylesheet with an xml extension and changing the <link rel> or @import link in the head of you document?

Sorry if this is rubbish..but hey gotta start somewhere! :)

Suzy

[lorax]

jjones,
Welcome to WebmasterWorld!

I'm not an expert when it comes to XSL but I'll take a shot at it.

I assume know that XSL in Internet Explorer 5 is NOT compatible with the official W3C XSL Recommendation.

I also assume the missing single quote in your example is a typo (?).

According to the W3C curly braces are not recognized recursively inside expressions. SO in your example of { background-image: url('{$commonImages}key.gif); } I think all you would need to do is to remove the inner curly braces, and add that single quote and you should be good to go. Try it and let us know.

[w3.org...]

[choster]

I don't think the problem here is the CSS-- by the time the browser "gets to" the CSS, the XSL engine ought to have already interpreted the variable. So somewhere, this value is not being found.

Have you tried explicitly calling the variable using xsl:value-of? This code works for me:

.table { background-image: url('
<xsl:value-of select="$commonImages" />
key.gif'); }

Please be sure to double-check the code for typos as well.

[jjones]

Thanks Choster,

I never even thought of doing that. I'll try that and let you all know if it works...