Question

I am using the following XSLT:

https://gist.github.com/4402884

Where the following template does the transformation to render html output as follows:

<li>
  <div class="content-left" style="float:left; width:300px"> content </div>

  <div class="content-left" style="float:left; width:300px">content </div>
</li>

<li>
  <div class="content-left" style="float:left; width:300px"> content </div>

  <div class="content-left" style="float:left; width:300px">content </div>
</li>
.
.
.

so on..
Actual XSLT doing the job to get the two column layout like this:

A-----B
C-----D
E-----F

where each row is an ‘li’ item

 <xsl:choose>
    <xsl:when test="$CurPos mod 2 =1">
       <xsl:text disable-output-escaping="yes">&lt;li style=&quot;width:610px; height:290px; &quot;&gt;</xsl:text>      
       <div class="content-left" style="width:290px; height:290px;float:left;">
            <xsl:value-of select="@PublishingRollupImage" disable-output-escaping="yes" />
            <span class="NewsHeading"><h4><xsl:value-of select="$CurPos"/><xsl:value-of select="@Title"/></h4></span>
            <span class="Desc" style="display:block; width:280px;"><xsl:value-of select="substring(@Comments,0,200)"/>
            <xsl:if test="string-length(@Comments) &gt; 200">…</xsl:if><a href="{$SafeLinkUrl}" class="ReadMore"> Read More</a></span>
        </div>

        <div class="content-right" style="float:right; width:290px; height:290px;">
            <xsl:if test="$CurPos != $LastRow ">
                <xsl:value-of select="following-sibling::*[1]/@PublishingRollupImage" disable-output-escaping="yes" />
                <span class="NewsHeading"><h4><xsl:value-of select="$LastRow"/><xsl:value-of select="following-sibling::*[1]/@Title"/></h4></span>
                <span class="Desc" style="display:block; width:280px;"><xsl:value-of select="substring(following-sibling::*[1]/@Comments,0,200)"/>
                <xsl:if test="string-length(following-sibling::*[1]/@Comments) &gt; 200">…</xsl:if>
                <a href="{$SibSafeLinkUrl}" class="ReadMore"> Read More</a></span>
            </xsl:if>
        </div>
    </xsl:when> 
    <xsl:otherwise>
         <xsl:text disable-output-escaping="yes">&lt;/li&gt;</xsl:text>
    </xsl:otherwise>
</xsl:choose>

Sadly, however Inernet Explorer produces unnecessary self-closed tags like this(just IE), FF and chrome render it correctly…

<li>
  <div class="content-left" style="float:left; width:300px"> content </div>

  <div class="content-left" style="float:left; width:300px">content </div>
</li></li/></li/>

<li>
  <div class="content-left" style="float:left; width:300px"> content </div>

  <div class="content-left" style="float:left; width:300px">content </div>
</li></li/></li/>

How do I get rid of those unwanted self-closed weird looking ‘li’ tags? Because i need the exact html structure for a jquery slider plugin to work, because of the unwanted tags, slider is misbehaving.

This is in IE:
IE http://www.imagesup.net/?di=9135673644516

This is in FireFox:
FF http://www.imagesup.net/?di=11135673652612

Answer 1

I am not sure this will solve your problem, but I would strongly consider re-jigging your xsl:choose statement. I am guessing you are using disable-output-escaping because if you tried to write your XSLT like the following sample, it would not be well-formed XML, and so not valid. (I’ve abridged the code sample for brevity).

<xsl:choose>
    <xsl:when test="$CurPos mod 2 =1">
       <li>  
       <div class="content-left">
           <xsl:value-of select="@PublishingRollupImage" />
        </div>
        <div class="content-right">
           <xsl:value-of select="following-sibling::*[1]/@PublishingRollupImage" />
        </div>
    </xsl:when> 
    <xsl:otherwise>
         </li>
    </xsl:otherwise>
</xsl:choose>

What you are trying to achieve is to group together pairs of element, so you select the elements in position 1, 3, 5, etc. and then output that element and the following one.

What you could do instead, to avoid the use of disable-output-escaping, is to re-write it like this.

<xsl:if test="$CurPos mod 2 =1">
   <li>  
      <div class="content-left">
         <xsl:value-of select="@PublishingRollupImage" />
      </div>
      <div class="content-right">
         <xsl:value-of select="following-sibling::*[1]/@PublishingRollupImage" />
      </div>
   </li>
</xsl:if>

This is now well-formed, and the li elements are being output directly. Whether this solves your problem or not, it is probably worth doing.