Cannot control overflow in sortable table

[amycwoods]

I love Google but I am Googled out trying to find the answer to my question, Please help!I am building an xml database of music venues. the venue listing will be found on the web. The problem is that even if I set the Table "myTable" as a "block" display, a specific height, and set the overflow to "scroll", it displays the entire xml list. This is the first time I have ever posted on a forum and I hope someone can help me out. Thanks in advance!XML File:<?xml version="1.0" encoding="ISO8859-1"?><?xml-stylesheet type="text/xsl" href="Venues.xsl"?><?xml-stylesheet type="text/css" href="list.css" ?><VENUES> <VENUE> <NAME VALUE="http://www.lastdaysaloon.com/santa%20rosa/calendar.html">The Last Day Saloon</NAME> <DATE>02/01</DATE> <TIME>8:00 PM</TIME> <LOCATION>Santa Rosa</LOCATION> <MAIN_ACT>Frank Hannon</MAIN_ACT> <GENRE>Rock</GENRE> <COST>$15.00</COST> </VENUE> <VENUE> <NAME VALUE="http://www.lastdaysaloon.com/santa%20rosa/calendar.html">The Last Day Saloon</NAME> <DATE>02/02</DATE> <TIME>8:00 PM</TIME> <LOCATION>Santa Rosa</LOCATION> <MAIN_ACT>BB King</MAIN_ACT> <GENRE>Blues</GENRE> <COST>$18.00</COST> </VENUE> <VENUE> <NAME VALUE="http://www.lastdaysaloon.com/santa%20rosa/calendar.html">The Last Day Saloon</NAME> <DATE>02/03</DATE> <TIME>8:00 PM</TIME> <LOCATION>Santa Rosa</LOCATION> <MAIN_ACT>Big Bad Vodoo Daddys</MAIN_ACT> <GENRE>Swing</GENRE> <COST>$18.00</COST> </VENUE> <VENUE> <NAME VALUE="http://www.lastdaysaloon.com/santa%20rosa/calendar.html">The Last Day Saloon</NAME> <DATE>02/04</DATE> <TIME>8:00 PM</TIME> <LOCATION>Santa Rosa</LOCATION> <MAIN_ACT>Big Bad Vodoo Daddys</MAIN_ACT> <GENRE>Swing</GENRE> <COST>$18.00</COST> </VENUE> <VENUE> <NAME VALUE="http://www.lastdaysaloon.com/santa%20rosa/calendar.html">The Last Day Saloon</NAME> <DATE>02/05</DATE> <TIME>8:00 PM</TIME> <LOCATION>Santa Rosa</LOCATION> <MAIN_ACT>Big Bad Vodoo Daddys</MAIN_ACT> <GENRE>Swing</GENRE> <COST>$18.00</COST> </VENUE> <VENUE> <NAME VALUE="http://www.lastdaysaloon.com/santa%20rosa/calendar.html">The Last Day Saloon</NAME> <DATE>02/06</DATE> <TIME>8:00 PM</TIME> <LOCATION>Santa Rosa</LOCATION> <MAIN_ACT>Big Bad Vodoo Daddys</MAIN_ACT> <GENRE>Swing</GENRE> <COST>$18.00</COST> </VENUE> <VENUE> <NAME VALUE="http://www.lastdaysaloon.com/santa%20rosa/calendar.html">The Last Day Saloon</NAME> <DATE>02/07</DATE> <TIME>8:00 PM</TIME> <LOCATION>Santa Rosa</LOCATION> <MAIN_ACT>Big Bad Vodoo Daddys</MAIN_ACT> <GENRE>Swing</GENRE> <COST>$18.00</COST> </VENUE> <VENUE> <NAME VALUE="http://www.lastdaysaloon.com/santa%20rosa/calendar.html">The Last Day Saloon</NAME> <DATE>02/08</DATE> <TIME>8:00 PM</TIME> <LOCATION>Santa Rosa</LOCATION> <MAIN_ACT>Big Bad Vodoo Daddys</MAIN_ACT> <GENRE>Swing</GENRE> <COST>$18.00</COST> </VENUE> <VENUE> <NAME VALUE="http://www.lastdaysaloon.com/santa%20rosa/calendar.html">The Last Day Saloon</NAME> <DATE>02/09</DATE> <TIME>8:00 PM</TIME> <LOCATION>Santa Rosa</LOCATION> <MAIN_ACT>Big Bad Vodoo Daddys</MAIN_ACT> <GENRE>Swing</GENRE> <COST>$18.00</COST> </VENUE> <VENUE> <NAME VALUE="http://www.lastdaysaloon.com/santa%20rosa/calendar.html">The Last Day Saloon</NAME> <DATE>02/10</DATE> <TIME>8:00 PM</TIME> <LOCATION>Santa Rosa</LOCATION> <MAIN_ACT>Big Bad Vodoo Daddys</MAIN_ACT> <GENRE>Swing</GENRE> <COST>$18.00</COST> </VENUE> <VENUE> <NAME VALUE="http://www.lastdaysaloon.com/santa%20rosa/calendar.html">The Last Day Saloon</NAME> <DATE>02/11</DATE> <TIME>8:00 PM</TIME> <LOCATION>Santa Rosa</LOCATION> <MAIN_ACT>Big Bad Vodoo Daddys</MAIN_ACT> <GENRE>Swing</GENRE> <COST>$18.00</COST> </VENUE> <VENUE> <NAME VALUE="http://www.lastdaysaloon.com/santa%20rosa/calendar.html">The Last Day Saloon</NAME> <DATE>02/12</DATE> <TIME>8:00 PM</TIME> <LOCATION>Santa Rosa</LOCATION> <MAIN_ACT>Big Bad Vodoo Daddys</MAIN_ACT> <GENRE>Swing</GENRE> <COST>$18.00</COST> </VENUE> <VENUE> <NAME VALUE="http://www.lastdaysaloon.com/santa%20rosa/calendar.html">The Last Day Saloon</NAME> <DATE>02/13</DATE> <TIME>8:00 PM</TIME> <LOCATION>Santa Rosa</LOCATION> <MAIN_ACT>Big Bad Vodoo Daddys</MAIN_ACT> <GENRE>Swing</GENRE> <COST>$18.00</COST> </VENUE> <VENUE> <NAME VALUE="http://www.lastdaysaloon.com/santa%20rosa/calendar.html">The Last Day Saloon</NAME> <DATE>02/14</DATE> <TIME>8:00 PM</TIME> <LOCATION>Santa Rosa</LOCATION> <MAIN_ACT>Big Bad Vodoo Daddys</MAIN_ACT> <GENRE>Swing</GENRE> <COST>$18.00</COST> </VENUE> <VENUE> <NAME VALUE="http://www.lastdaysaloon.com/santa%20rosa/calendar.html">The Last Day Saloon</NAME> <DATE>02/15</DATE> <TIME>8:00 PM</TIME> <LOCATION>Santa Rosa</LOCATION> <MAIN_ACT>Big Bad Vodoo Daddys</MAIN_ACT> <GENRE>Swing</GENRE> <COST>$18.00</COST> </VENUE> <VENUE> <NAME VALUE="http://www.lastdaysaloon.com/santa%20rosa/calendar.html">The Last Day Saloon</NAME> <DATE>02/16</DATE> <TIME>8:00 PM</TIME> <LOCATION>Santa Rosa</LOCATION> <MAIN_ACT>Big Bad Vodoo Daddys</MAIN_ACT> <GENRE>Swing</GENRE> <COST>$18.00</COST> </VENUE> <VENUE> <NAME VALUE="http://www.lastdaysaloon.com/santa%20rosa/calendar.html">The Last Day Saloon</NAME> <DATE>02/17</DATE> <TIME>8:00 PM</TIME> <LOCATION>Santa Rosa</LOCATION> <MAIN_ACT>Big Bad Vodoo Daddys</MAIN_ACT> <GENRE>Swing</GENRE> <COST>$18.00</COST> </VENUE> <VENUE> <NAME VALUE="http://www.lastdaysaloon.com/santa%20rosa/calendar.html">The Last Day Saloon</NAME> <DATE>02/18</DATE> <TIME>8:00 PM</TIME> <LOCATION>Santa Rosa</LOCATION> <MAIN_ACT>Big Bad Vodoo Daddys</MAIN_ACT> <GENRE>Swing</GENRE> <COST>$18.00</COST> </VENUE> <VENUE> <NAME VALUE="http://www.lastdaysaloon.com/santa%20rosa/calendar.html">The Last Day Saloon</NAME> <DATE>02/19</DATE> <TIME>8:00 PM</TIME> <LOCATION>Santa Rosa</LOCATION> <MAIN_ACT>Big Bad Vodoo Daddys</MAIN_ACT> <GENRE>Swing</GENRE> <COST>$18.00</COST> </VENUE> <VENUE> <NAME VALUE="http://www.lastdaysaloon.com/santa%20rosa/calendar.html">The Last Day Saloon</NAME> <DATE>02/20</DATE> <TIME>8:00 PM</TIME> <LOCATION>Santa Rosa</LOCATION> <MAIN_ACT>Big Bad Vodoo Daddys</MAIN_ACT> <GENRE>Swing</GENRE> <COST>$18.00</COST> </VENUE> <VENUE> <NAME VALUE="http://www.lastdaysaloon.com/santa%20rosa/calendar.html">The Last Day Saloon</NAME> <DATE>02/21</DATE> <TIME>8:00 PM</TIME> <LOCATION>Santa Rosa</LOCATION> <MAIN_ACT>Big Bad Vodoo Daddys</MAIN_ACT> <GENRE>Swing</GENRE> <COST>$18.00</COST> </VENUE> <VENUE> <NAME VALUE="http://www.lastdaysaloon.com/santa%20rosa/calendar.html">The Last Day Saloon</NAME> <DATE>02/22</DATE> <TIME>8:00 PM</TIME> <LOCATION>Santa Rosa</LOCATION> <MAIN_ACT>Big Bad Vodoo Daddys</MAIN_ACT> <GENRE>Swing</GENRE> <COST>$18.00</COST> </VENUE> <VENUE> <NAME VALUE="http://www.lastdaysaloon.com/santa%20rosa/calendar.html">The Last Day Saloon</NAME> <DATE>02/23</DATE> <TIME>8:00 PM</TIME> <LOCATION>Santa Rosa</LOCATION> <MAIN_ACT>Big Bad Vodoo Daddys</MAIN_ACT> <GENRE>Swing</GENRE> <COST>$18.00</COST> </VENUE> <VENUE> <NAME VALUE="http://www.lastdaysaloon.com/santa%20rosa/calendar.html">The Last Day Saloon</NAME> <DATE>02/24</DATE> <TIME>8:00 PM</TIME> <LOCATION>Santa Rosa</LOCATION> <MAIN_ACT>Big Bad Vodoo Daddys</MAIN_ACT> <GENRE>Swing</GENRE> <COST>$18.00</COST> </VENUE> <VENUE> <NAME VALUE="http://www.lastdaysaloon.com/santa%20rosa/calendar.html">The Last Day Saloon</NAME> <DATE>02/25</DATE> <TIME>8:00 PM</TIME> <LOCATION>Santa Rosa</LOCATION> <MAIN_ACT>Big Bad Vodoo Daddys</MAIN_ACT> <GENRE>Swing</GENRE> <COST>$18.00</COST> </VENUE> <VENUE> <NAME VALUE="http://www.lastdaysaloon.com/santa%20rosa/calendar.html">The Last Day Saloon</NAME> <DATE>02/26</DATE> <TIME>8:00 PM</TIME> <LOCATION>Santa Rosa</LOCATION> <MAIN_ACT>Big Bad Vodoo Daddys</MAIN_ACT> <GENRE>Swing</GENRE> <COST>$18.00</COST> </VENUE> <VENUE> <NAME VALUE="http://www.lastdaysaloon.com/santa%20rosa/calendar.html">The Last Day Saloon</NAME> <DATE>02/27</DATE> <TIME>8:00 PM</TIME> <LOCATION>Santa Rosa</LOCATION> <MAIN_ACT>Big Bad Vodoo Daddys</MAIN_ACT> <GENRE>Swing</GENRE> <COST>$18.00</COST> </VENUE> <VENUE> <NAME VALUE="http://www.lastdaysaloon.com/santa%20rosa/calendar.html">The Last Day Saloon</NAME> <DATE>02/28</DATE> <TIME>8:00 PM</TIME> <LOCATION>Santa Rosa</LOCATION> <MAIN_ACT>Big Bad Vodoo Daddys</MAIN_ACT> <GENRE>Swing</GENRE> <COST>$18.00</COST> </VENUE> <VENUE> <NAME VALUE="http://www.mystictheatre.com/calendar/list/2010/12#1">McNear's Mystic Theater</NAME> <DATE>01/01</DATE> <TIME>8:30 PM</TIME> <LOCATION>Petaluma</LOCATION> <MAIN_ACT>The B52's</MAIN_ACT> <GENRE>Alternative</GENRE> <COST>$10.00</COST> </VENUE> <VENUE> <NAME VALUE="http://www.mystictheatre.com/calendar/list/2010/12#1">McNear's Mystic Theater</NAME> <DATE>01/02</DATE> <TIME>8:30 PM</TIME> <LOCATION>Petaluma</LOCATION> <MAIN_ACT>Eric Lindell</MAIN_ACT> <GENRE>Bluegrass</GENRE> <COST>$10.00</COST> </VENUE> <VENUE> <NAME VALUE="http://www.aubergineafterdarkandcafe.com/home.cfm">Aubergine After Dark</NAME> <DATE>02/07</DATE> <TIME>2:00 PM</TIME> <LOCATION>Sebastopol</LOCATION> <MAIN_ACT>Ziggy Marley</MAIN_ACT> <GENRE>Ragae</GENRE> <COST>$25.00</COST> </VENUE> </VENUES> XSL File:<?xml version="1.0" encoding="ISO8859-1"?><!-- DWXMLSource="Venues.xml" --><xsl:stylesheet version="1.0"xmlns:xsl="http://www.w3.org/1999/XSL/Transform"><xsl:template match="/"><html> <link href="list.css" rel="stylesheet" type="text/css" /><head><script type="text/javascript" src="scripts/jquery.js"></script><script type="text/javascript" src="scripts/tablesort.js"></script></head><body> <div id="list"><table id="myTable" class="tablesorter"> <tr> <th class="sortable">DATE</th> <th class="sortable">TIME</th> <th class="sortable">NAME</th> <th class="sortable">LOCATION</th> <th class="sortable">MAIN ACT</th> <th class="sortable">GENRE</th> <th class="sortable">COST</th> </tr> <xsl:for-each select="VENUES/VENUE"> <xsl:sort select="DATE" order="ascending"/> <tr> <td><xsl:value-of select="DATE"/></td> <td><xsl:value-of select="TIME"/></td> <td> <a> <xsl:attribute name="target">_blank</xsl:attribute> <xsl:attribute name="href"> <xsl:value-of select="NAME/@VALUE"/></xsl:attribute> <xsl:value-of select="NAME"/> </a> </td> <td><xsl:value-of select="LOCATION"/></td> <td><xsl:value-of select="MAIN_ACT"/></td> <td><xsl:value-of select="GENRE"/></td> <td><xsl:value-of select="COST"/></td> </tr> </xsl:for-each> </table> </div></body> </html> </xsl:template> </xsl:stylesheet>CSS file:@charset "UTF-8";/* CSS Document */body { font-family: Optima, "Optima ExtraBlack"; font-size: 12px; color:#000000; margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */ padding: 0; text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */ background-color: #000033; } #list { margin-top: 0px; background-image: url(SCmusic.png); height: 900px; width: 900px; margin-left: 10px; background-repeat: no-repeat;}#myTable { margin-top: 330px; margin-left:75px; margin-right:auto; border-spacing: 2px; position: absolute; border-width: 1px; height: 300px; display: block; overflow: scroll;} th { text-align: left; padding: 7px; outline-color: #000000; outline-width: 1px; outline-style: solid; } td { padding: 7px; outline-color: #000000; outline-width: 1px; outline-style: solid;}th a:link, th a:visited, th a:active { font-weight: bold; color: #000000; text-decoration: none;}th a:hover { text-decoration: underline; cursor: pointer; color: #CC0000;}td a:link, td a:visited, td a:active, td a:hover { text-decoration: none; color: #990000;}td a:hover { text-decoration: underline; cursor:pointer;}

[Martin Honnen]

Are you sure it is an XSLT problem? You seem to apply CSS to the HTML result of an XSLT transformation. Unless your CSS works within a static HTML document but does not work in the HTML result document of your XSLT transformation I don't see how the problem relates to XSLT. So you might want to try the CSS forum http://w3schools.invisionzone.com/index.php?showforum=6.

[boen_robot]

1. You currently have:

<html> <link href="list.css" rel="stylesheet" type="text/css" /><head>

Make that

<html><head><link href="list.css" rel="stylesheet" type="text/css" />

to make sure the generated XHTML is valid.2. From the XML, remove

<?xml-stylesheet type="text/css" href="list.css" ?>

to make sure that you're styling the resulting XHTML, not the XML.3. If the problems still persist, find a way to get the resulting XHTML, and check your CSS against that. In Firefox for example, you can get the "Web Developer" extension, and from its "View Source" tab, select "View Generated Source".

[amycwoods]

Thanks for the info. It appears that the CSS was being applied except for some aspects in the <table =id"myTable">. After the following changes, it works perfectly so far when I preview in Dreamweaver!<div id="list"><div id="myTable"><table class="tablesorter"> <tr> <th class="sortable">DATE</th> <th class="sortable">TIME</th> <th class="sortable">NAME</th> <th class="sortable">LOCATION</th> <th class="sortable">MAIN ACT</th> <th class="sortable">GENRE</th> <th class="sortable">COST</th> </tr> <xsl:for-each select="VENUES/VENUE"> <xsl:sort select="DATE" order="ascending"/> <tr> <td><xsl:value-of select="DATE"/></td> <td><xsl:value-of select="TIME"/></td> <td> <a> <xsl:attribute name="target">_blank</xsl:attribute> <xsl:attribute name="href"> <xsl:value-of select="NAME/@VALUE"/></xsl:attribute> <xsl:value-of select="NAME"/> </a> </td> <td><xsl:value-of select="LOCATION"/></td> <td><xsl:value-of select="MAIN_ACT"/></td> <td><xsl:value-of select="GENRE"/></td> <td><xsl:value-of select="COST"/></td> </tr> </xsl:for-each></table></div></div>New Question:Is there any way to have only the <td> elements scroll and keep the <th> stationary?

[Martin Honnen]

A HTML table can be partitioned into table sections by explicitly using thead and tbody elements and in theory you can apply CSS to a table section so

<!DOCTYPE html><html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Example</title><style type="text/css">tbody.test {  height: 200px;  overflow: auto;}</style></head><body><h1>Test</h1><table><thead><tr><th>col 1</th><th>col 2</th></tr></thead><tbody class="test"><tr><td>1, 1</td><td>1, 2</td></tr><tr><td>2, 1</td><td>2, 2</td></tr><tr><td>3, 1</td><td>3, 2</td></tr><tr><td>4, 1</td><td>4, 2</td></tr><tr><td>5, 1</td><td>5, 2</td></tr><tr><td>6, 1</td><td>6, 2</td></tr><tr><td>7, 1</td><td>7, 2</td></tr><tr><td>8, 1</td><td>8, 2</td></tr><tr><td>9, 1</td><td>9, 2</td></tr><tr><td>10, 1</td><td>10, 2</td></tr></tbody></table></body></html>

should do. In practice only Mozilla browsers support that currently in some way and https://bugzilla.mozilla.org/show_bug.cgi?id=28800 suggests they want to remove that feature.