content query webpart itemstyle wrapped by group style in XSLT - xslt

Question

I have the following markup:
<ul id="slider">
<!-- slider item -->
<li>
...
</li>
<!-- end of slider item -->
</ul>
and I have defined the following itemStyle and GroupStyle xsl in header.xsl and itemStyle.xsl for displaying data from a SharePoint 2010 List:
<!-- in header.xsl -->
<xsl:template name="Slider" match="*[#GroupStyle='Slider']" mode="header">
<ul id="slider">
</ul>
</xsl:template>
<!-- in itemStyle.xsl -->
<xsl:template name="Slider" match="Row[#Style='Slider']" mode="itemstyle">
<xsl:variable name="SafeImageUrl">
<xsl:call-template name="OuterTemplate.GetSafeStaticUrl">
<xsl:with-param name="UrlColumnName" select="#Picture"/>
</xsl:call-template>
</xsl:variable>
<xsl:variable name="Title">
<xsl:call-template name="OuterTemplate.GetTitle">
<xsl:with-param name="Title" select="#Title" />
</xsl:call-template>
</xsl:variable>
<xsl:variable name="Details">
<xsl:call-template name="OuterTemplate.GetTitle">
<xsl:with-param name="Title" select="#Details" />
</xsl:call-template>
</xsl:variable>
<li>
<img src="{$SafeImageUrl}" alt="{$Title}" />
<section class="media-description">
<h2 class="slider-headline"><xsl:value-of disable-output-escaping="yes" select="$Title" /></h2>
<p><xsl:value-of disable-output-escaping="yes" select="$Details" /></p>
</section>
</li>
</xsl:template>
but the thing is, when applying the previous two templates, the <ul id="slider"></ul> appears isolated from all <li> items as below:
<ul id="slider"></ul>
<!-- a bunch of tables and td here.. -->
<ul style="width: 100%;" class="dfwp-column dfwp-list">
<li class="dfwp-item"></li>
<li>
<img alt="Must-see US exhibitions" src="">
<section class="media-description"><h2 class="slider-headline">Must-see US exhibitions</h2>
<p>(Blank)</p>
</section>
</li>
...
</ul>
all I want is to have <ul id="slider>" element to wrap those li's directly,
so how can i do that ?
Thanks

Answer 1

What's your input XML?
You'd do something like this:
<xsl:template name="Slider" match="*[#GroupStyle='Slider']" mode="header"><!-- Sure you want to match *? -->
<ul id="slider">
<!-- Match the input XML path to your rows from the context of the matched element above -->
<xsl:apply-templates select="Row[#Style='Slider']" mode="itemstyle" />
</ul>
</xsl:template>
<xsl:template name="Slider" match="Row[#Style='Slider']" mode="itemstyle">
<li>..</li>
</xsl:template>
Can't figure out why you are using "mode"s either.

Answer 2

problem solved, thanks to #James Love,
and here are the steps:
make a copy of ContentQueryMain.xsl, as the following article says
after having a copy of ContentQueryMain.xsl, edit it and look for OutTemplate.Body
then you can place your wrapper in the following variables (but they have to be escaped)
<xsl:template name="OuterTemplate.Body">
<xsl:variable name="BeginColumn1" select="string('<ul id="slider" class="dfwp-column dfwp-list" style="width:')" />
<!-- ^------------------^ -->
<xsl:variable name="BeginColumn2" select="string('%" >')" />
<xsl:variable name="BeginColumn" select="concat($BeginColumn1, $cbq_columnwidth, $BeginColumn2)" />
<xsl:variable name="EndColumn" select="string('</ul>')" />
<!-- ^---------^ -->
stupid workaround, but its working :S