?
Solved

Want to remove spaces in output bar on .html file using XML, XSL, and CSS

Posted on 2007-07-20
3
Medium Priority
?
672 Views
Last Modified: 2012-08-13
I'm trying to remove the spaces in the output bars.

HTML code:
<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>Election Night Results</title>
      <link href="polls.css" rel="stylesheet" type="text/css">
   </head>
   <body>
      <div id="intro">
         <p><img src="logo.jpg" alt="Election Day Results"></p><a href="#">Election Home Page</a><a href="#">President</a><a href="#">Senate Races</a><a href="#">Congressional Races</a><a href="#">State Senate</a><a href="#">State House</a><a href="#">Local Races</a><a href="#">Judicial</a><a href="#">Referendums</a></div>
      <div id="results">
         <h1>Congressional Races</h1>
         <h2>1st Congressional District</h2>
         <table cellpadding="1" cellspacing="1">
            <tr>
               <th>Candidate</th>
               <th class="num">Votes</th>
            </tr>
            <tr>
               <td class="name">Sarah Carlson (D)</td>
               <td class="num">45,125 (48%)</td>
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
            </tr>
            <tr>
               <td class="name">Pete deJesus (R)</td>
               <td class="num">44,498 (47%)</td>
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
            </tr>
            <tr>
               <td class="name">Alan Tompkins (I)</td>
               <td class="num">5,143 (5%)</td>
               <td class="green" />
               <td class="green" />
               <td class="green" />
               <td class="green" />
               <td class="green" />
               <td class="green" />
            </tr>
         </table>
         <h2>2nd Congressional District</h2>
         <table cellpadding="1" cellspacing="1">
            <tr>
               <th>Candidate</th>
               <th class="num">Votes</th>
            </tr>
            <tr>
               <td class="name">Gary Griffin (D)</td>
               <td class="num">69,505 (41%)</td>
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
            </tr>
            <tr>
               <td class="name">Frank Brown (R)</td>
               <td class="num">78,133 (46%)</td>
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
            </tr>
            <tr>
               <td class="name">Roland Washington (G)</td>
               <td class="num">8,109 (5%)</td>
               <td class="green" />
               <td class="green" />
               <td class="green" />
               <td class="green" />
               <td class="green" />
            </tr>
            <tr>
               <td class="name">Karen Reese (L)</td>
               <td class="num">13,004 (8%)</td>
               <td class="green" />
               <td class="green" />
               <td class="green" />
               <td class="green" />
               <td class="green" />
               <td class="green" />
               <td class="green" />
               <td class="green" />
            </tr>
         </table>
         <h2>3rd Congressional District</h2>
         <table cellpadding="1" cellspacing="1">
            <tr>
               <th>Candidate</th>
               <th class="num">Votes</th>
            </tr>
            <tr>
               <td class="name">Anne Sanchez (D)</td>
               <td class="num">65,203 (56%)</td>
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
            </tr>
            <tr>
               <td class="name">Cynthia Thomas (R)</td>
               <td class="num">51,289 (44%)</td>
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
            </tr>
         </table>
         <h2>4th Congressional District</h2>
         <table cellpadding="1" cellspacing="1">
            <tr>
               <th>Candidate</th>
               <th class="num">Votes</th>
            </tr>
            <tr>
               <td class="name">Jerry Wilkes (D)</td>
               <td class="num">49,201 (44%)</td>
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
            </tr>
            <tr>
               <td class="name">Barry Mitchell (R)</td>
               <td class="num">58,414 (52%)</td>
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
            </tr>
            <tr>
               <td class="name">Paula Wellton (I)</td>
               <td class="num">3,901 (3%)</td>
               <td class="green" />
               <td class="green" />
               <td class="green" />
               <td class="green" />
            </tr>
         </table>
         <h2>5th Congressional District</h2>
         <table cellpadding="1" cellspacing="1">
            <tr>
               <th>Candidate</th>
               <th class="num">Votes</th>
            </tr>
            <tr>
               <td class="name">Pete Grimbold (D)</td>
               <td class="num">42,105 (48%)</td>
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
               <td class="blue" />
            </tr>
            <tr>
               <td class="name">Carol Ives (R)</td>
               <td class="num">43,349 (50%)</td>
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
               <td class="red" />
            </tr>
            <tr>
               <td class="name">Michael Dorn (G)</td>
               <td class="num">1,401 (2%)</td>
               <td class="green" />
               <td class="green" />
            </tr>
         </table>
      </div>
   </body>
</html>


XML code:
<?xml version="1.0" encoding="UTF-8" ?>
<!--
   Election Results
   Author = Aaron Latham
   Date = 7/20/2007
   Filename =  polls.xml
   Supporting Files = polls.xsl
-->

<?xml-stylesheet type="text/xsl" href="polls.xsl" ?>
<polls>
   <race>
      <title>1st Congressional District</title>
      <candidate>
         <name>Sarah Carlson</name>
         <party>D</party>
         <votes>45125</votes>
      </candidate>
      <candidate>
         <name>Pete deJesus</name>
         <party>R</party>
         <votes>44498</votes>
      </candidate>
      <candidate>
         <name>Alan Tompkins</name>
         <party>I</party>
         <votes>5143</votes>
      </candidate>
   </race>
   <race>
      <title>2nd Congressional District</title>
      <candidate>
         <name>Gary Griffin</name>
         <party>D</party>
         <votes>69505</votes>
      </candidate>
      <candidate>
         <name>Frank Brown</name>
         <party>R</party>
         <votes>78133</votes>
      </candidate>
      <candidate>
         <name>Roland Washington</name>
         <party>G</party>
         <votes>8109</votes>
      </candidate>
      <candidate>
         <name>Karen Reese</name>
         <party>L</party>
         <votes>13004</votes>
      </candidate>
   </race>
   <race>
      <title>3rd Congressional District</title>
      <candidate>
         <name>Anne Sanchez</name>
         <party>D</party>
         <votes>65203</votes>
      </candidate>
      <candidate>
         <name>Cynthia Thomas</name>
         <party>R</party>
         <votes>51289</votes>
      </candidate>
   </race>
   <race>
      <title>4th Congressional District</title>
      <candidate>
         <name>Jerry Wilkes</name>
         <party>D</party>
         <votes>49201</votes>
      </candidate>
      <candidate>
         <name>Barry Mitchell</name>
         <party>R</party>
         <votes>58414</votes>
      </candidate>
      <candidate>
         <name>Paula Wellton</name>
         <party>I</party>
         <votes>3901</votes>
      </candidate>
   </race>
   <race>
      <title>5th Congressional District</title>
      <candidate>
         <name>Pete Grimbold</name>
         <party>D</party>
         <votes>42105</votes>
      </candidate>
      <candidate>
         <name>Carol Ives</name>
         <party>R</party>
         <votes>43349</votes>
      </candidate>
      <candidate>
         <name>Michael Dorn</name>
         <party>G</party>
         <votes>1401</votes>
      </candidate>
   </race>
</polls>

CSS code:
/*
   Election Results Cascading Style Sheet
   Filename = polls.css
 
*/

body            {font-family: Arial, Helvetica, sans-serif; margin: 0px;
                 background: white url(back.jpg) repeat-y}

#intro          {width: 200px; position: absolute; top: 0px; left: 0px}
#intro p        {margin: 0px; padding: 0px}
#intro a        {display: block; color: rgb(104,133,166); font-size: 12pt;
                 font-family: Arial, Helvetica, sans-serif; font-weight: bold;
                 text-decoration: none; margin: 10px 0px 0px 10px}

#results        {padding: 2px 0px 0px 5px; position: absolute;
                 left: 205px; top: 10px}
#results h1     {font-size: 14pt; margin: 0px}
#results h2     {font-size: 10pt; margin-top: 12px; margin-bottom: 0px}
#results table  {font-size: 8pt; margin-top: 0px; margin-bottom: 10px}
#results th     {width: 160px; text-align: left; border-bottom: 1px solid black}
#results .num   {text-align: right; width: 100px; padding-right: 5px}  
#results .blue  {background-color: blue; width: 1px}
#results .red   {background-color: red; width: 1px}
#results .green {background-color: green; width: 1px}


XSL code:
<?xml version="1.0" encoding="UTF-8" ?>
<!--
   Election Results XSLT Style Sheet
   Author = Aaron Latham
   Date = 7/20/2007
   Filename = polls.xsl
   Supporting Files = back.jpg, logo.jpg, polls.css
-->

<xsl:stylesheet version='1.0' xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" version="4.0" />

<xsl:variable name="redcell">
<td class="red"> </td>
</xsl:variable>

<xsl:variable name="bluecell">
<td class="blue"> </td>
</xsl:variable>

<xsl:variable name="greencell">
<td class="green"> </td>
</xsl:variable>


<xsl:template match="/">
   <html>
   <head>
      <title>Election Night Results</title>
      <link href="polls.css" rel="stylesheet" type="text/css" />
   </head>
   <body>
      <div id="intro">
         <p><img src="logo.jpg" alt="Election Day Results" /></p>
         <a href="#">Election Home Page</a>
         <a href="#">President</a>
         <a href="#">Senate Races</a>
         <a href="#">Congressional Races</a>
         <a href="#">State Senate</a>
         <a href="#">State House</a>
         <a href="#">Local Races</a>
         <a href="#">Judicial</a>
         <a href="#">Referendums</a>
      </div>

      <div id="results">
         <h1>Congressional Races</h1>
         <xsl:apply-templates select="polls/race" />
      </div>
   </body>
   </html>
</xsl:template>

<xsl:template match="race">
   <h2><xsl:value-of select="title" /></h2>
   <table cellpadding="1" cellspacing="1">
      <tr><th>Candidate</th><th class="num">Votes</th></tr>
      <xsl:apply-templates select="candidate" />
   </table>
</xsl:template>

<xsl:template match="candidate">
   <xsl:variable name="percent" select="votes div sum(..//votes)" />
   <tr>
      <td class="name"><xsl:value-of select="name" /> (<xsl:value-of select="party" />)</td>
      <td class="num"><xsl:value-of select="format-number(votes, '#,##0')" /><xsl:text> </xsl:text><xsl:value-of select="format-number($percent, '(#0%)')" /></td>

      <xsl:call-template name="showBar">
         <xsl:with-param name="cells" select="100*$percent" />
         <xsl:with-param name="partyType" select="party" />
      </xsl:call-template>
   </tr>
</xsl:template>

<xsl:template name="showBar">
   <xsl:param name="cells" select="0" />
   <xsl:param name="partyType" />

   <xsl:if test="$cells > 0" >
      <xsl:choose>
         <xsl:when test="$partyType='R'">
            <xsl:copy-of select="$redcell" />
         </xsl:when>
         <xsl:when test="$partyType='D'">
            <xsl:copy-of select="$bluecell" />
         </xsl:when>
         <xsl:otherwise>
            <xsl:copy-of select="$greencell" />
         </xsl:otherwise>
      </xsl:choose>

      <xsl:call-template name="showBar">
         <xsl:with-param name="cells" select="$cells - 1" />
         <xsl:with-param name="partyType" select="$partyType" />
      </xsl:call-template>
   </xsl:if>
</xsl:template>

</xsl:stylesheet>

0
Comment
Question by:alatham23
  • 2
3 Comments
 
LVL 12

Accepted Solution

by:
oceanbeach earned 2000 total points
ID: 19530688
Hello alatham23,

Have you tried setting cellpadding to 0...

  <table cellpadding="0" cellspacing="0">

I hops this helps!

oceanbeach
0
 

Author Comment

by:alatham23
ID: 19530736
Thank you.  That worked.
0
 
LVL 12

Expert Comment

by:oceanbeach
ID: 19530758
Hi alatham23,

That is great.  Glad I could help out!

-OB
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
Suggested Courses

807 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question