I've hit a roadblock with my initial XML project and I need some help. My goal is to create an address book using an XML file containing contact data, which is then transformed in XSLT. While both the XML and XSLT files function correctly, I encounter issues when trying to incorporate my CSS file into the XSLT for formatting the page to match our website's design. Once the CSS is added, my table only displays the first row specified in the XSLT and halts. Below are the three code files provided along with the outcome after including the CSS file.
XML:
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="contactdata.xsl"?>
<!DOCTYPE addressbook [
<!ELEMENT addressbook (contact)>
<!ELEMENT contact (fname,lname,mi,staddress,city,state,zip,phone,email,twitter)>
<!ELEMENT fname (#PCDATA)>
<!ELEMENT lname (#PCDATA)>
<!ELEMENT mi (#PCDATA)>
<!ELEMENT staddress (#PCDATA)>
<!ELEMENT city (#PCDATA)>
<!ELEMENT state (#PCDATA)>
<!ELEMENT zip (#PCDATA)>
<!ELEMENT phone (#PCDATA)>
<!ELEMENT email (#PCDATA)>
<!ELEMENT twitter (#PCDATA)>
]>
<addressbook>
<contact>
<fname>Peyton</fname>
<lname>Manning</lname>
<mi>Z</mi>
<staddress>123 Go Vols</staddress>
<city>Denver</city>
<state>CO</state>
<zip>12345</zip>
<phone>1-800-youwish</phone>
<email><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="16667b7778787f787156746479787579653875797b">[email protected]</a></email>
<twitter>peyton_manning</twitter>
</contact>
<contact>
<fname>Eric</fname>
<lname>Berry</lname>
<mi>P</mi>
<staddress>123 Arrowhead Stadium</staddress>
<city>Kansas City</city>
<state>MO</state>
<zip>34567</zip>
<phone>816-213-4452</phone>
<email><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2441464156565d64474c4d4142570a474b49">[email protected]</a></email>
<twitter>eric_berry</twitter>
</contact>
</addressbook>
XSLT:
<?xml-stylesheet type="text/css" href="sitetemplate.css"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output omit-xml-declaration="yes" indent="yes"/>
<xsl:strip-space elements="*"/>
<xsl:template match="/*">
<html>
<body>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Middle Initial</th>
<th>Street Address</th>
<th>City</th>
<th>State</th>
<th>Zip</th>
<th>Phone</th>
<th>Email</th>
<th>Twitter</th>
</tr>
<xsl:apply-templates/>
</table>
</body>
</html>
</xsl:template>
<xsl:template match="contact">
<tr><xsl:apply-templates/></tr>
</xsl:template>
<xsl:template match="contact/*">
<td><xsl:value-of select="."/></td>
</xsl:template>
</xsl:stylesheet>
CSS:
.text {font-family: Helvetica, Times, serif; color:white;}
.center {text-align:center;}
body {background-image:url('wallpaper.jpg'); font-family: Helvetica, Times, serif;}
hr {border: 0; width: 50%; color:white;}
table, th, td {border:10px white; background-color:blue; color:white;}
a:link {color:#75B8FA; text-decoration:none;}
a:visited {color:#75B8FA; text-decoration:none;}
a:hover {color:#75B8FA; text-decoration:none;}
a:active {color:#FFFFFF; text-decoration:none;}
The issue persists even after incorporating the CSS: (Since image posting is restricted until I reach a certain rep on StackOverflow.)