XML, XSL, CSS attribute issue

Discussion in 'HTML' started by Pradeep, Jan 16, 2008.

  1. Pradeep

    Pradeep Guest

    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:eek:utput 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....
     
    Pradeep, Jan 16, 2008
    #1
    1. Advertising

  2. Pradeep

    Andy Dingley Guest

    On 16 Jan, 06:50, Pradeep <> wrote:
    > 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">.


    So is this an XSLT problem or a CSS problem? Capture the HTML
    generated and study that. It's very difficult to solve CSS selector
    problems in XSLT, because you can't tell which process is failing. Did
    you really generate the exact HTML you expected?

    Either transform the XML / XSLT server-side and captuure the output,
    or use a tool like the Firefox Web Developer extension that has an
    option to show "Generated HTML" even for client-side generation.


    > 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;
    >
    > }


    Also your CSS sucks.

    * Don't set line-height. Very rarely needed, should almost always be
    set with a dimensionless number, rather than an em unit.

    * Don't mix verdana in with other font names. The odd sizing behaviour
    will screw things up.

    * Certainly don't default the font-size for body to "small"!
     
    Andy Dingley, Jan 16, 2008
    #2
    1. Advertising

  3. Pradeep wrote:
    > 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">.

    [snip]

    It works in IE7 but not in Firefox. Firefox shows the generated code
    indeed to have class="row1" in those rows. Bug in Firefox?
     
    Harlan Messinger, Jan 16, 2008
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. 5tein
    Replies:
    1
    Views:
    473
    Patrick TJ McPhee
    Apr 30, 2004
  2. Replies:
    1
    Views:
    3,613
    A. Bolmarcich
    May 27, 2005
  3. schaf
    Replies:
    3
    Views:
    1,315
    schaf
    Sep 16, 2005
  4. Kourosh
    Replies:
    6
    Views:
    855
    Peter Flynn
    May 17, 2006
  5. Pradeep
    Replies:
    5
    Views:
    460
    Pavel Lepin
    Jan 16, 2008
Loading...

Share This Page