XML, XSL, CSS attribute issue

From: Pradeep <juneja.pradeep_at_gmail.com>
Date: Tue, 15 Jan 2008 22:52:30 -0800 (PST)
Message-ID: <6cd77834-6049-49c9-8cf9-b1cbaea44902@c4g2000hsg.googlegroups.com>


I have a following XML file, XSL file and CSS file.

I am facing one problem , that ITEM rows are not displayed in proper color (RED) as mentioned in css file for .row1...... Same thing works well if the table is created in <xsl:template match="/"> but doesn't work for table created in <xsl:template match="ITEMLIST">.



XML file ( name myxml.xml)
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="myxsl.xsl"?>
<ITEMLIST>
        <ITEM>

<NAME> Item1 </NAME>
<PRICE> 500 </PRICE>
<LOCATION> ABC </LOCATION> </ITEM> <ITEM>
<NAME> Item2 </NAME>
<PRICE> 600 </PRICE>
<LOCATION> XYZ</LOCATION>
</ITEM> <ITEM>
<NAME> Item3 </NAME>
<PRICE> 700 </PRICE>
<LOCATION> DEF</LOCATION>
</ITEM> <ITEM>
<NAME> Item4 </NAME>
<PRICE> 900 </PRICE>
<LOCATION> QWE</LOCATION>
</ITEM>

</ITEMLIST>

XSL file ( name myxsl.xsl)

<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="xml" version="1.0" doctype-public="-//W3C//DTD XHTML 1.0 Strict//EN"
doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"/>

<xsl:template match="/">

    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">

    	<head>
    		<title>Data Sheet</title>
		<link rel="stylesheet" type="text/css" href="mycss.css" />
    	</head>
	<body>
		<table>
			<tr>
				<th>A</th>
				<th>B</th>
			</tr>
			<tr class="row0">
				<td>1</td>
				<td>2</td>
			</tr>
			<tr class="row1">
				<td>3</td>
				<td>4</td>
			</tr>
		</table>
  	<xsl:apply-templates/>
    	</body>

    </html>
</xsl:template>

<xsl:template match="ITEMLIST">

	<table>
	<tr>
	<th>Name</th>
	<th>Price</th>
	<th>Location</th>
	</tr>
	<xsl:for-each select="ITEM">
		<tr class="row1">
		<td><xsl:value-of select="NAME" /></td>
		<td><xsl:value-of select="PRICE" /></td>
		<td><xsl:value-of select="LOCATION" /></td>
        	</tr>
	</xsl:for-each>
	</table>

</xsl:template>

</xsl:stylesheet>



CSS file ( name mycss.css)

html body {

	line-height:1.55em;
	font-family:"Lucida Grande", verdana, lucida, helvetica, sans-serif;

	margin:0;
	padding:0;
	font-size:x-small;
	font-size:small;

}

table
{

	display: table;
	border-collapse:collapse;
	empty-cells:show;
	border-top:1px solid #ccc;
	border-right:1px solid #ccc;
	border-left:1px solid #ccc;
	border-bottom:1px solid #ccc;

}

tr {

        display: table-row;
}

.row0 {

	background-color:yellow;
	color:#1559B3;

}
.row1 {
	background-color:red;
	color:#1559B3;

}

td {

	display: table-cell;
 	border-top:1px solid #ccc;
	border-right:1px solid #ccc;
	border-left:1px solid #ccc;
	border-bottom:1px solid #ccc;

}

th {

	display: table-cell;
 	border-top:1px solid #ccc;
	border-right:1px solid #ccc;
	border-left:1px solid #ccc;
	border-bottom:1px solid #ccc;
	font-weight: 700;
	background-color:#99cccc;

}

If you have any idea about this issue, please do reply.... Received on Wed Jan 16 2008 - 00:52:30 CST

Original text of this message