Strange Behavior With Anchor in XSLT

kwilliams · July 21st, 2005, 09:26 AM

I have a very simple XML doc:

Code:

<?xml version="1.0" encoding="UTF-8"?>
<faqs>
    <faq>
        <department>ap</department>
        <category>gen</category>
        <question>QUESTION?</question>
        <answer>ANSWER</answer>
    </faq>
    <faq>
        <department>da</department>
        <category>pp</category>
        <question>QUESTION?</question>
        <answer>ANSWER</answer>
    </faq>
    <faq>
        <department>it</department>
        <category>rp</category>
        <question>QUESTION?</question>
        <answer>ANSWER</answer>
    </faq>
<faqs>

...and an XSLT stylesheet:

Code:

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template match="/">
        <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
                <title>Douglas County, Kansas - Appraiser FAQ's</title>
            </head>
            <body>
                <h1>Appraiser FAQ's</h1>
                <br />
                <br />


                <div class="icebluebar">General FAQ's</div>
                [list]
                <xsl:for-each select="faqs/faq">
                    <xsl:if test="category = 'gen'">

                        <li><xsl:element name="a"><xsl:attribute name="href">#<xsl:number value="position()" format="1" /></xsl:attribute><xsl:value-of select="question" /></xsl:element></li>
                    </xsl:if>
                </xsl:for-each>
                </ul>

                <div class="icebluebar">Personal Property FAQ's</div>
                [list]
                <xsl:for-each select="faqs/faq">
                    <xsl:if test="category = 'pp'">

                        <li><xsl:element name="a"><xsl:attribute name="href">#<xsl:number value="position()" format="1" /></xsl:attribute><xsl:value-of select="question" /></xsl:element></li>
                    </xsl:if>
                </xsl:for-each>
                </ul>

                <div class="icebluebar">Real Property FAQ's</div>
                [list]
                <xsl:for-each select="faqs/faq">
                    <xsl:if test="category = 'rp'">

                        <li><xsl:element name="a"><xsl:attribute name="href">#<xsl:number value="position()" format="1" /></xsl:attribute><xsl:value-of select="question" /></xsl:element></li>
                    </xsl:if>
                </xsl:for-each>
                </ul>



                <xsl:for-each select="faqs/faq">
                    <xsl:element name="a">
                        <xsl:attribute name="name"><xsl:number value="position()" format="1" /></xsl:attribute>
                        <xsl:attribute name="id"><xsl:number value="position()" format="1" /></xsl:attribute>
                    </xsl:element>
                    <strong>Q. <xsl:value-of select="question" /></strong>
                    <br />
                <strong>A. </strong><xsl:value-of select="answer" />
                <br />
                <br />
                </xsl:for-each>

            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>

...that gets transformed by an ASP.NET/VB.NET script:

Code:

<%@ Page Language="VB" ContentType="text/html" ResponseEncoding="iso-8859-1" Debug="true" %>
<%@ import Namespace="System.Data" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<link rel="stylesheet" href="http://DOMAIN/DIRECTORY/styles/css/default.css">
<%
'Load XML
Dim xml = Server.CreateObject("Microsoft.XMLDOM")
xml.async = false
xml.load("http://DOMAIN/DIRECTORY/departments/ap/docs/xml/ap_faqs.xml")

'Load XSL
Dim xsl = Server.CreateObject("Microsoft.XMLDOM")
xsl.async = false
xsl.load("http://DOMAIN/DIRECTORY/departments/ap/docs/xslt/ap_faqs.xsl")

'Transform file
Response.Write(xml.transformNode(xsl))
%>

...but I'm running into a strange problem. The text for the questions & answers next to each anchor is showing up as text with a hover property that changes the text's color to #660000 in Firefox, and just stays stylized in IE6. I've made sure to review the resulting code through the "View Source" method, and everything appears that it should work properly. But it's still acting strange in the browser window.

I'm hoping that someone can see an obvious mistake on my part concerning the XSLT stylesheet. Any & all advice is appreciated. Thanks.

KWilliams

kwilliams · July 21st, 2005, 10:00 AM

I forgot to include the resulting code from this transformation. Here it is:

Code:

<head>
<title>FAQ's</title>
</head>
<body>
<h1>FAQ's</h1>
<br />
<br />
<div class="icebluebar">General FAQ's</div>
[list]
<li><a href="#1">QUESTION?</a></li>
<li><a href="#2">QUESTION?</a></li>
<li><a href="#3">QUESTION?</a></li>
</ul>

<a name="1" id="1" />
<strong>Q. QUESTION1?</strong>
<br />
<strong>A. </strong>
ANSWER1
<br />
<br />
<a href="#top"><img src="http://DOMAIN/DIRECTORY/IMAGES/GIF/backtotop.gif" alt="Back to Top" title="Back to Top" width="19" height="19" /></a>
<br />
<br />

<a name="2" id="2" />
<strong>Q. QUESTION2?</strong>
<br />
<strong>A. </strong>
ANSWER2
<br />
<br />
<a href="#top"><img src="http://DOMAIN/DIRECTORY/IMAGES/GIF/backtotop.gif" alt="Back to Top" title="Back to Top" width="19" height="19" /></a>

<a name="3" id="3" />
<strong>Q. QUESTION3?</strong>
<br />
<strong>A. </strong>
ANSWER3
<br />
<br />
<a href="#top"><img src="http://DOMAIN/DIRECTORY/IMAGES/GIF/backtotop.gif" alt="Back to Top" title="Back to Top" width="19" height="19" /></a>

</body>
</html>

KWilliams

kwilliams · July 21st, 2005, 11:35 AM

Ok, I figured out part of my problem, but not how to solve it yet.

An anchor tag in HTML should read like this:
<a name="1" id="1"></a>

...and the transformed version from the XSLT stylesheet produces this:
<a name="1" id="1" />

When I added a static version of the page, and changed this small item, the text next to the anchor looked fine. But when I changed that static version back to the one that's produced by the XSLT stylesheet, it became linked text again.

So I tried this solution:

Code:

<xsl:element name="a" />
 <xsl:attribute name="name">rp<xsl:number value="position()" format="1" /></xsl:attribute>
  <xsl:attribute name="id">rp<xsl:number value="position()" format="1" /></xsl:attribute>
<xsl:element name="/a" />

...but it results in the same anchor:
<a name="1" id="1" />

Does anyone have any advice on how I can get this to work properly or know of another method to create anchors with XSLT? Thanks again for any help.

KWilliams

mhkay · July 21st, 2005, 11:59 AM

Please note that id/name values in an anchor should begin with a letter. The browser is probably tolerating this error.

The html output method only serializes HTML correctly in the case of elements in the null namespace. If you put elements in a different namespace, for example, the XHTML namespace, then they are serialized as XML. This is why you are getting the <a name="x"/> form of output.

Michael Kay
http://www.saxonica.com/
Author, XSLT Programmer's Reference and XPath 2.0 Programmer's Reference

kwilliams · July 21st, 2005, 01:32 PM

Concerning the id/name value issue, I realize that error quickly after my post, and resolved it by adding the category value before the number (i.e. gen1, pp1). I receive a suggestion from another forum to add an output method to the XSLT stylesheet like this: <xsl:output method="html" />, but it didn't change anything. So do you know of a way to get around this issue while still having well-formed code? Thanks.

KWilliams

mhkay · July 21st, 2005, 01:49 PM

As mentioned earlier, if you're generating html you shouldn't put it in the XHTML namespace.

Michael Kay
http://www.saxonica.com/
Author, XSLT Programmer's Reference and XPath 2.0 Programmer's Reference

kwilliams · July 21st, 2005, 01:52 PM

Great, I removed the reference to the XHTML namespace (<html xmlns="http://www.w3.org/1999/xhtml">), and it works great now. Thanks for pointing out the obvious, and I hope that you have a great weekend.

KWilliams