XSLT Ignoring HTML Div Tags

Question

Tsakaki 0 Newbie Poster

15 Years Ago

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:xsl

Edited 15 Years Ago by Tsakaki because: n/a

4 Contributors
5 Replies
1K Views
8 Years Discussion Span
Latest Post 7 Years Ago Latest Post by Reverend Jim

Dani AI

Generated 10 Months Ago

Short diagnosis tied to the thread: XSLT is only producing HTML — the browser/CSS is doing the layout. The symptom described by (wrapper and content backgrounds/borders not growing with the columns) matches having the column boxes taken out of the normal flow. In 's posted CSS the column rules use absolute positioning; absolutely positioned children do not contribute to a parent’s height, and floated children only do so until the parent is cleared. That is why the wrapper/content look empty even though the DIVs are present in the output.

Practical fixes that keep the XSLT output the same but restore the wrapper’s background/border:

Avoid position:absolute for the column DIVs; use floated columns or a modern layout (flexbox / CSS multi-column).
Contain floats by adding a clearing mechanism on the parent (overflow:auto or a clearfix pseudo-element) so the parent encloses its children.
Example CSS patterns (not included in earlier posts):

.content { overflow: auto; /* quick contain */ }
.col { float: left; width: 300px; margin-right: 20px; }
.clearfix::after { content: ""; display: table; clear: both; }

Notes and context: keeping the stylesheet external (books.css) is fine — XSLT can output the same classed DIVs while CSS handles layout. Splitting the book nodes into three groups (as did) is a valid approach for columnized content; the remaining step is to use a layout model that keeps those column DIVs in the normal flow (or to explicitly clear them). Modern alternatives (display:flex or column-count) simplify multi-column layouts and avoid manual node grouping.

All 5 Replies

xml_looser 3 Junior Poster

15 Years Ago

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

Edited 15 Years Ago by xml_looser because: n/a

Reverend Jim 6,665 Hi, I'm Jim, one of DaniWeb's moderators.

7 Years Ago

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

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Tsakaki 0 Newbie Poster · Answer 1 · 2010-12-29T22:32:31+00:00

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 0 Newbie Poster · Answer 2 · 2010-12-29T22:57:09+00:00

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 0 Newbie Poster · Answer 3 · 2019-04-07T20:07:49+00:00

Hi!

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

Thanks!

XSLT Ignoring HTML Div Tags

Dani AI

Recommended Answers Collapse Answers

All 5 Replies

Recommended Answers