using css in html embedded in xml rendered using xsl with javascript (phew)

[confused]

Bear with me on this its a bit long.

I have some xml with a section like

<product>
<name>a great product</name>
</product>

I use javascript to parse this with an xsl template and place the
output in a <DIV> in the containing html page.
All fine so far.

Now I want to highlight some special offers so I change the XML to be

<product>
<name><p style="background-color:yellow;color:red;">a great product</
p></name>
</product>

which works as long as I use the <xsl:copy-of select="name"> in the
xsl.

but I don't really want to plaster this around the xml so I simplified
it to

<product>
<name><p class="specialOffer">a great product</p></name>
</product>

a created a css entry in an external style sheet of

..specialOffer
{
color: red;
background-color: yellow;
}

Again works, but I'm still not happy with this what I want is to
change it to

<product>
<name><specialOffer>a great product</specialOffer></name>
</product>

and use the css entry
specialOffer
{
color: red;
background-color: yellow;
}

but this doesn't seem to work, Why not? any ideas

Many Thanks in advance espcially if you managed to read this far

P.

 

[confused]

Oh and this works but only in mozilla not IE6


<product>
<name><specialOffer class="specialOfferStyle">a great product</
specialOffer></name>
</product>

 

[[Jongware]]

Bear with me on this its a bit long.

[snipped for convenience]

and use the css entry
specialOffer
{
color: red;
background-color: yellow;
}

but this doesn't seem to work, Why not? any ideas

Yeah -- you can't create arbitrary classes on the fly (-- in IE; as you noticed
later, apparently you _can_ in Firefox. I dint know that one). Change the css
declaration to ".specialOffer" (note the period), and use it either as <p
class="specialOffer"> (for entire paragraphs) or as <span class="specialOffer">
(as a text attribute).
Verbosity is not a problem since you can add these attributes using the XSL.

[Jongware]

 

[David Carlisle]

Oh and this works but only in mozilla not IE6


<product>
<name><specialOffer class="specialOfferStyle">a great product</
specialOffer></name>
</product>

since you are using xsl anyway why not just generate the standard html
+css that you said worked earlier rather than a mixture if html and
your own xml markup?

adding a template like

<xsl:template match="specialOffer">
<div class="specialOffer">
<xsl:apply-templates/>
</div>
</xsl:template>


should be all you need, together with the css that styles div.specialOffer