Styling XSLT fragments using CSS
Issue
Macromedia Dreamweaver 8 does not support code that typically resides between the <head></head> tags (such as scripts and styles) when the code has been placed into an XSLT fragment.
Reason
Styling an XSLT fragment using the Property Inspector will tell Dreamweaver 8 to write the code into the <head> of the document. An XSLT fragment, however, does not have a<head> tag:
In some cases, the code will be placed above the XSL template definition, which will create an invalid XSLT document and not render the CSS appropriately in the fragment (new code in yellow):
<xsl:template match="/">
<style type="text/css">
<xsl:comment>
.style1 {color: #990000}
</xsl:comment>
</style>
<span outputclass="style1"><xsl:value-of select="specials/menu_item/item"/></span>
</xsl:template>
This markup is not best practices and not supported by the W3C specification. When this code is transformed as part of a dynamic page this code will end up in the <body> of the dynamic page.
While common browsers do not have trouble processing this extra information at the current time, it is not best practices and there is no guarantee that it will be supported by future versions of browsers.
Dreamweaver does not support styles defined in the<body> and therefore will not render them in design view.
In addition, Dreamweaver may place additional style entries above the template code in certain situations (new code in yellow):
<style type="text/css">
<xsl:comment>
.style1 {color: #990000}
</xsl:comment>
</style>
<xsl:template match="/">
<style type="text/css">
<xsl:comment>
.style1 {color: #990000}
</xsl:comment>
</style>
<span outputclass="style1"gt;<xsl:value-of select="specials/menu_item/item"/></span>
</xsl:template>
This markup is invalid and will generate errors from within the transformation engine when you try to preview the page in a browser.
Solution
Do not use the Property Inspector to create styles within an XSLT fragment. Instead, use Design time style sheets to work with styles in your XSLT fragment at design time. The same Design Time style sheet can be attached to your dynamic server page (PHP, Cold Fusion, ASP) as an external style sheet.
This content requires Flash
To view this content, JavaScript must be enabled, and you need the latest version of the Adobe Flash Player.
Download the free Flash Player now!
