XSLT Ignoring HTML Div Tags

[Tsakaki]

I'm working on a simple XML/XSLT file that is just meant to display a list of books on a very simple html layout. The files were created to learn XML and XSLT.

I have since created two XSLT files that use the same XML. One displays the information in a single column within in the <div id="content"></div> tags. This one works perfectly. The other displays the list in three columns. The problem I am having is that while the <xslt:apply-templates /> tag is withing the <div id="col"></div> tags, it is ignoring the content and wrapper divisions above it.

The XML:

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/xsl" href="books.xsl"?>
<bookshelf>
  <book>
    <genre>Young Adult</genre>
    <title>The Hunger Games</title>
    <author>Suzanne Collins</author>
	<image>img/theHungerGames.jpg</image>
	<read>1</read>
	<status></status>
  </book>
  <book>
    <genre>Young Adult</genre>
    <title>Catching Fire</title>
    <author>Suzanne Collins</author>
	<image>img/catchingFire.jpg</image>
	<read>1</read>
	<status></status>
  </book>
  <book>
    <genre>Young Adult</genre>
    <title>Mockingjay</title>
    <author>Suzanne Collins</author>
	<image>img/mockingjay.jpg</image>
	<read>1</read>
	<status></status>
  </book>
  <book>
    <genre>Young Adult</genre>
    <title>Graceling</title>
    <author>Kristin Cashore</author>
	<image>img/graceling.jpg</image>
	<read>2</read>
	<status></status>
  </book>
  <book>
    <genre>Young Adult</genre>
    <title>Fire</title>
    <author>Kristin Cashore</author>
	<image>img/fire.jpg</image>
	<read>2</read>
	<status></status>
  </book>
  <book>
    <genre>Young Adult</genre>
    <title>Sisters Red</title>
    <author>Jackson Pearce</author>
	<image>img/sistersRed.jpg</image>
	<read>1</read>
	<status></status>
  </book>
  <book>
    <genre>Young Adult</genre>
    <title>Leviathan</title>
    <author>Scott Westerfeld</author>
	<image>img/leviathan.jpg</image>
	<read>1</read>
	<status></status>
  </book>
  <book>
    <genre>Young Adult</genre>
    <title>Behemoth</title>
    <author>Scott Westerfeld</author>
	<image>img/behemoth.jpg</image>
	<read>1</read>
	<status></status>
  </book>
  <book>
    <genre>Romance</genre>
    <title>Crazy Hot</title>
    <author>Tara Janzen</author>
	<image>img/crazyHot.jpg</image>
	<read>2</read>
	<status></status>
  </book>
  <book>
    <genre>Romance</genre>
    <title>Crazy Cool</title>
    <author>Tara Janzen</author>
	<image>img/crazyCool.jpg</image>
	<read>3</read>
	<status></status>
  </book>
  <book>
    <genre>Romance</genre>
    <title>Crazy Wild</title>
    <author>Tara Janzen</author>
	<image>img/crazyWild.jpg</image>
	<read>3</read>
	<status></status>
  </book>
  <book>
    <genre>Romance</genre>
    <title>Crazy Kisses</title>
    <author>Tara Janzen</author>
	<image>img/crazyKisses.jpg</image>
	<read>3</read>
	<status></status>
  </book>
  <book>
    <genre>Romance</genre>
    <title>Crazy Love</title>
    <author>Tara Janzen</author>
	<image>img/crazyLove.jpg</image>
	<read>2</read>
	<status>Lost</status>
  </book>
  <book>
    <genre>Romance</genre>
    <title>Crazy Sweet</title>
    <author>Tara Janzen</author>
	<image>img/crazySweet.jpg</image>
	<read>2</read>
	<status></status>
  </book>
  <book>
    <genre>Literature</genre>
    <title>Pride and Prejudice</title>
    <author>Jane Austen</author>
	<image>img/prideAndPrejudice.jpg</image>
	<read>1</read>
	<status></status>
  </book>
  <book>
  	<genre>Literature</genre>
	<title>Sense and Sensibility</title>
	<author>Jane Austen</author>
	<image>img/senseAndSensibility.jpg</image>
	<read>0</read>
	<status></status>
  </book>
  <book>
  	<genre>Literature</genre>
	<title>Northanger Abbey</title>
	<author>Jane Austen</author>
	<image>img/northangerAbbey.jpg</image>
	<read>Currently Reading</read>
	<status></status>
  </book>
</bookshelf>

The 3 Column XSLT:

<?xml version="1.0" encoding="utf-8"?>
<!-- DWXMLSource="books.xml" -->
<!DOCTYPE xsl:stylesheet  [
	<!ENTITY nbsp   " ">
	<!ENTITY copy   "©">
	<!ENTITY reg    "®">
	<!ENTITY trade  "™">
	<!ENTITY mdash  "—">
	<!ENTITY ldquo  "“">
	<!ENTITY rdquo  "”"> 
	<!ENTITY pound  "£">
	<!ENTITY yen    "¥">
	<!ENTITY euro   "€">
]>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html" encoding="utf-8" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
  <xsl:template match="/">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Tsakaki's Bookshelf</title>
    <link href="books.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <div id="wrapper">
      <div id="header">
        <h1>Tsakaki's Bookshelf</h1>
      </div>
      <div id="content">
        <div class="col">
          <xsl:for-each select="//book[1]|//book[2]|//book[3]|//book[4]|//book[5]|//book[6]" >
            <xsl:element name="img">
              <xsl:attribute name="class">cover</xsl:attribute>
              <xsl:attribute name="src"><xsl:value-of select="image"/></xsl:attribute>
              <xsl:attribute name="width">72</xsl:attribute>
              <xsl:attribute name="height">107</xsl:attribute>
            </xsl:element>
            <h2><xsl:value-of select="title" /></h2>
            <p><span class="subhead">Author: </span><xsl:value-of select="author" /></p>
            <p><span class="subhead">Genre: </span><xsl:value-of select="genre" /></p>
            <p><span class="subhead">Times Read: </span><xsl:value-of select="read" /></p>
            <xsl:choose>
              <xsl:when test="status=''">
                <br />
              </xsl:when>
              <xsl:when test="status!=''">
                <p><span class="subhead">Status: </span><xsl:value-of select="status" /></p>
              </xsl:when>
            </xsl:choose>
            <div class="clearFloat"></div>
          </xsl:for-each>
        </div>
        <div class="col">
          <xsl:for-each select="//book[7]|//book[8]|//book[9]|//book[10]|//book[11]|//book[12]">
            <xsl:element name="img">
              <xsl:attribute name="class">cover</xsl:attribute>
              <xsl:attribute name="src"><xsl:value-of select="image"/></xsl:attribute>
              <xsl:attribute name="width">72</xsl:attribute>
              <xsl:attribute name="height">107</xsl:attribute>
            </xsl:element>
            <h2><xsl:value-of select="title" /></h2>
            <p><span class="subhead">Author: </span><xsl:value-of select="author" /></p>
            <p><span class="subhead">Genre: </span><xsl:value-of select="genre" /></p>
            <p><span class="subhead">Times Read: </span><xsl:value-of select="read" /></p>
            <xsl:choose>
              <xsl:when test="status=''">
                <br />
              </xsl:when>
              <xsl:when test="status!=''">
                <p><span class="subhead">Status: </span><xsl:value-of select="status" /></p>
              </xsl:when>
            </xsl:choose>
            <div class="clearFloat"></div>
          </xsl:for-each>
        </div>
        <div class="col3">
          <xsl:for-each select="//book[13]|//book[14]|//book[15]|//book[16]|//book[17]">
            <xsl:element name="img">
              <xsl:attribute name="class">cover</xsl:attribute>
              <xsl:attribute name="src"><xsl:value-of select="image"/></xsl:attribute>
              <xsl:attribute name="width">72</xsl:attribute>
              <xsl:attribute name="height">107</xsl:attribute>
            </xsl:element>
            <h2><xsl:value-of select="title" /></h2>
            <p><span class="subhead">Author: </span><xsl:value-of select="author" /></p>
            <p><span class="subhead">Genre: </span><xsl:value-of select="genre" /></p>
            <p><span class="subhead">Times Read: </span><xsl:value-of select="read" /></p>
            <xsl:choose>
              <xsl:when test="status=''">
                <br />
              </xsl:when>
              <xsl:when test="status!=''">
                <p><span class="subhead">Status: </span><xsl:value-of select="status" /></p>
              </xsl:when>
            </xsl:choose>
            <div class="clearFloat"></div>
          </xsl:for-each>
        </div>
      </div>
    </div>
    </body>
    </html>
  </xsl:template>
</xsl:stylesheet>

Is there a way to get the XSLT to acknowledge ALL divisions? Or is trying to make an XML file display in multiple columns hopeless?

[xml_looser]

I make a new css include your xsl
red color i make my css
green color make xsl better

with-param kn define which node will displayed
and
with-param where define which column it is

<?xml version="1.0" encoding="utf-8"?>
<!-- DWXMLSource="books.xml" -->
<!DOCTYPE xsl:stylesheet  [
	<!ENTITY nbsp   " ">
	<!ENTITY copy   "©">
	<!ENTITY reg    "®">
	<!ENTITY trade  "™">
	<!ENTITY mdash  "—">
	<!ENTITY ldquo  "“">
	<!ENTITY rdquo  "”"> 
	<!ENTITY pound  "£">
	<!ENTITY yen    "¥">
	<!ENTITY euro   "€">
]>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/1999/xhtml">
  <xsl:output method="html" indent="yes" encoding="utf-8" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
  <xsl:template match="/">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Tsakaki's Bookshelf</title>
    <!--<link href="books.css" rel="stylesheet" type="text/css" />-->
    <style type="text/css">
	.col1 {
  background-color: #f0d0d0;
  border: solid 1px #000000;
  color: #000000;
  padding: 8px;
  position: absolute;
  left: 0px;
  top: 90px;
  width: 300px;
}

.col2 {
  background-color: #c0a0a0;
  border: solid 1px #000000;
  color: #000000;
  padding: 8px;
  position: absolute;
  left: 320px;
  top: 90px;
  width: 300px;  
}

.col3 {
  background-color: #d0f0d0;
  border: solid 1px #000000;
  color: #000000;
  padding: 8px;
  position: absolute;
  left: 640px;
  top: 90px;
  width: 300px; 
  
}
.clearFloat
{  
  padding: 8px;  
  width: 300px;
  height: 420px;  
}
	</style>	
	</head>    
    <body>
    <div id="wrapper">
      <div id="header">
        <h1>Tsakaki's Bookshelf</h1>
      </div>
      <div id="content">
        <xsl:call-template name="all">
		<xsl:with-param name="kn" select="//book[position()&lt;7]"/>
		<xsl:with-param name="where" select="'1'"/>

		</xsl:call-template>
        <xsl:call-template name="all">
		<xsl:with-param name="kn" select="//book[position()&gt;6 and position()&lt;13 ]"/>

		<xsl:with-param name="where" select="'2'"/>
		</xsl:call-template>
<xsl:call-template name="all">
		<xsl:with-param name="kn" select="//book[position()&gt;12]"/>

		<xsl:with-param name="where" select="'3'"/>

		</xsl:call-template>
      </div>
    </div>
    </body>
    </html>
  </xsl:template>
  <xsl:template name="all">
  <xsl:param name="kn"/>
<xsl:param name="where"/>
  <div class="col{$where}">
          <xsl:for-each select="$kn">
            <div class="clearFloat">
			<xsl:element name="img">
              <xsl:attribute name="class">cover</xsl:attribute>
              <xsl:attribute name="src"><xsl:value-of select="image"/></xsl:attribute>
              <xsl:attribute name="width">72</xsl:attribute>
              <xsl:attribute name="height">107</xsl:attribute>
            </xsl:element>
            <h2><xsl:value-of select="title" /></h2>
            <p><span class="subhead">Author: </span><xsl:value-of select="author" /></p>
            <p><span class="subhead">Genre: </span><xsl:value-of select="genre" /></p>
            <p><span class="subhead">Times Read: </span><xsl:value-of select="read" /></p>
            <xsl:choose>
              <xsl:when test="status=''">
                <br />
              </xsl:when>
              <xsl:when test="status!=''">
                <p><span class="subhead">Status: </span><xsl:value-of select="status" /></p>
              </xsl:when>
            </xsl:choose>
            </div>
          </xsl:for-each>
        </div>
  </xsl:template>
</xsl:stylesheet>

you can call via icq 567877710

[Tsakaki]

Thanks, I'll give it a shot! The css code though, does it have to be in the XSL file or can it be in the CSS file I already created and attached?

[Tsakaki]

Thanks for the help, but it's still stubbornly glitching.

The content and wrapper divisions still aren't being treated as though they have content.

The column divisions are there, and start in the right place on the screen, but the background/border on the wrapper and the background on the content division don't extend with the content.

[Jonny_3]

Hi!

Are You (or anyone:) still interested in this CSS formatting issue, or is this problem solved?

Thanks!

[Reverend Jim]

The thread has been dead for more than 8 years. What do you think?