asked on

linking css to xslt

Hello Guys,

I'm having some difficulties linking external css with xslt. The desired output should be:

The Browse by letter text must be : blue , font size is 20

Search data column must be : bold, font size is 16 background colour is #FFC

The Replace data column must be: italic font size is 14

- all of hte requirement were written in a css file but I could not link it to xslt. Any help is highly appreciated..

-------dictionary.css
	<style type="text/css" media="screen">

		div#heading
		{
		font-size: 20px;
		color: 	#0000FF;
		}
		
		div#search
		{
		font-size: 16px;
		font-weight:bold;
		background-color: #FFC;
		}
		
		div#replace
		{
		font-size: 14px;
		font-style:italic;
		}
		
	</style>

----- xslt

<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0" >
    <xsl:key name="initial" match="translation" use="@initial"/>
    <xsl:template match="Dictionary">
        <html>
            <head>
                <title> Bilingual Lexicon <xsl:value-of select="/Dictionary/from" />-<xsl:value-of select="/Dictionary/to" /></title>
				<!-- External CSS -->

				 <link type="text/css" rel="stylesheet" href="dictionary.css" /> 
            </head>
            <body>
				<div id="heading">
					<h3>Browse by letter</h3>
				</div>
                <p>
                    <xsl:apply-templates select="translation[generate-id() = generate-id(key('initial', @initial)[1])]" mode="TOC" >
                        <xsl:sort select="@initial" order="ascending" data-type="text"/>
                    </xsl:apply-templates>
                </p>
                <table border="1">
                    <tr><th>search</th><th>replace</th></tr>
                    <xsl:apply-templates select="translation" mode="FLOW">
                        <xsl:sort select="@initial" order="ascending" data-type="text"/>
                    </xsl:apply-templates>
                    
                </table>
            </body>
        </html>
    </xsl:template>
    <xsl:template match="translation" mode="TOC">
        <a href="{concat('#Dictionary', @initial)}">
            <b><xsl:value-of select="@initial" /></b>
        </a>
        <xsl:text>&#160; </xsl:text>
    </xsl:template>
    
    <xsl:template match="translation" mode="FLOW">
        <xsl:variable name="is-first-initial" select="not(preceding-sibling::translation[@initial = current()/@initial])"/>
        <tr>
            <td>
                <xsl:if test="$is-first-initial">
                    <a name="{concat('Dictionary', @initial)}"></a>
                </xsl:if>
                <xsl:value-of select="search"/>
            </td>
            <td>
                <xsl:for-each select="replace">
                    <xsl:if test="not(position() = 1)">
                        <xsl:text>; </xsl:text>
                    </xsl:if>
                    <xsl:value-of select="."/>
                </xsl:for-each>
            </td>
        </tr>
    </xsl:template>

</xsl:stylesheet>

Open in new window

Gertone (Geert Bormans)

This is correct, it is likely just a matter of placing the dictionary.css in the right location,
likely with the source XML.
Are you serving the result up, or is this on a local machine, statically?

Gertone (Geert Bormans)

If you can't figure out where to put the css, simply make it inline in the stylesheet

Gertone (Geert Bormans)

and you should not have a style element in the css,
the style elementy is for when you have the css inline in the html head

AussieSilver

ASKER

I put it in a server.. i have to user external css. seems something wrong with linking

AussieSilver

ASKER

any edited codes will appreciated... note that I did nothing in xslt to link search and replace with the css....

Gertone (Geert Bormans)

now I see,
there is quiet a bit missing in the CSS, I am working on it.
You must not assume the XML for the CSS, but the resulting html

ASKER CERTIFIED SOLUTION

Gertone (Geert Bormans)

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

AussieSilver

ASKER

immmm. should work on Firefox not IE. all testing is done on Firefox mate

Gertone (Geert Bormans)

well, than you are OK, I expressed myself not weel I think.
It will work in IE if you push IE in standards mode (by having a proper doctype for the html)
it will always work on FireFox
If this CSS with your XSLT does not work, then it is located at the wrong place.
Best thing to do... put the full server path in the XSLT

AussieSilver

ASKER

hi

not working also in IE

AussieSilver

ASKER

put the full server path in the XSLT

they are in one directory

AussieSilver

ASKER

, but also give the columns a class attribute

should i do this?

Gertone (Geert Bormans)

yes, that is what I said, you need to have standard mode on in IE,
this you can do by serialising with a proper doctype.
For that you need to change the XSLT by adding an xsl:output element
I have attached a new start for your XSLT, that will create the doctype and give you standards mode in IE.

With this new XSLT and the CSS as I rewrote it, it now works in FireFox and Internet Explorer for me.
If it does not for you, the CSS is not in the right location.
Is the transform in teh server or in the browser?
If the transform is in the server, I suspect that the path should be relative to the XML path

<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0" >
    <xsl:key name="initial" match="translation" use="@initial"/>
    <xsl:output doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" 
        doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
         method="html" version="4.0" omit-xml-declaration="yes"/>
    <xsl:template match="Dictionary">
        <html>
            <head>
...

Open in new window

Gertone (Geert Bormans)

no need for adding class attributes to the columns,
it should work as it is now

at least the blue title should be there, even in old browsers, so if that is not the case, it is about the dictionary.css location

Please make sure the caching is not bothering you

AussieSilver

ASKER

should I keep this or delete div elements?
<body>
                        <div id="heading">
                              <h3>Browse by letter</h3>
                        </div>

AussieSilver

ASKER

it is really weird :(

not working something wrong may be with the location of dictionary.css

>>Is the transform in teh server or in the browser?
- yes it is in the server
>>If the transform is in the server, I suspect that the path should be relative to the XML path
- how?

Gertone (Geert Bormans)

delete the div elements, no need for them
I did not spot that you changed the XSLT there

Let us first test with the CSS inside (that is what you always should do, if you need to find the location, make sure the CSS works)

Try this XSLT (without external CSS first)

What do you see? Is this what you need?

Let's start this way trying to isolate the problems

<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0" >
    <xsl:key name="initial" match="translation" use="@initial"/>
    <xsl:output doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" 
        doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
         method="html" version="4.0" omit-xml-declaration="yes"/>
    <xsl:template match="Dictionary">
        <html>
            <head>
                <title> Bilingual Lexicon <xsl:value-of select="/Dictionary/from" />-<xsl:value-of select="/Dictionary/to" /></title>
<!--                <link type="text/css" rel="stylesheet" href="dictionary.css" />
-->
                <style type="text/css" media="screen">
                    <![CDATA[
                		body > h3
                		{
                		font-size: 20px;
                		color: 	#0000FF;
                		}
                		
                		tr > td:first-child
                		{
                		font-size: 16px;
                		font-weight:bold;
                		background-color: #FFC;
                		}
                		
                		tr > td:first-child + td
                		{
                		font-size: 14px;
                		font-style:italic;
                		}
                    ]]>
                </style>
                </head>
            <body>
                <h3>Browse by letter</h3>
                <p>
                    <xsl:apply-templates select="translation[generate-id() = generate-id(key('initial', @initial)[1])]" mode="TOC" >
                        <xsl:sort select="@initial" order="ascending" data-type="text"/>
                    </xsl:apply-templates>
                </p>
                <table border="1">
                    <tr><th>search</th><th>replace</th></tr>
                    <xsl:apply-templates select="translation" mode="FLOW">
                        <xsl:sort select="@initial" order="ascending" data-type="text"/>
                    </xsl:apply-templates>
                    
                </table>
            </body>
        </html>
    </xsl:template>
    <xsl:template match="translation" mode="TOC">
        <a href="{concat('#Dictionary', @initial)}">
            <b><xsl:value-of select="@initial" /></b>
        </a>
        <xsl:text>&#160; </xsl:text>
    </xsl:template>
    
    <xsl:template match="translation" mode="FLOW">
        <xsl:variable name="is-first-initial" select="not(preceding-sibling::translation[@initial = current()/@initial])"/>
        <tr>
            <td>
                <xsl:if test="$is-first-initial">
                    <a name="{concat('Dictionary', @initial)}"></a>
                </xsl:if>
                <xsl:value-of select="search"/>
            </td>
            <td>
                <xsl:for-each select="replace">
                    <xsl:if test="not(position() = 1)">
                        <xsl:text>; </xsl:text>
                    </xsl:if>
                    <xsl:value-of select="."/>
                </xsl:for-each>
            </td>
        </tr>
    </xsl:template>

</xsl:stylesheet>

Open in new window

AussieSilver

ASKER

Gertone,

THAT T IS EXACTLY WHAT I WANT !!! but it should be in an external link :)

Gertone (Geert Bormans)

OK, then we know the CSS is working for your testing browser setup

then replace the style element with a link element as you had before,
and experiment with the location of the CSS and the URL in the href.
That is so much dependent of your infrastructure that you have to figure that out yourself
It could also be a matter of credentials, upper/lowercase of path and filename, so mucht that can go wrong

Next thing to test is simply put the full server path to the CSS in the XSLT
eg.
<link type="text/css" rel="stylesheet" href="http://www.yoursite.com/yourapp/CSS/dictionary.css" />
and see if you can make that work

Gertone (Geert Bormans)

I will be gone all morning by the way, gives you plenty of oportunity to test

AussieSilver

ASKER

I worked... Thanks bro

ARE YOU THERE ? I WILL PUT ANOTHER QUESTION :)

Gertone (Geert Bormans)

welcome,
just came back, but have a bunch of meetings this afternoon

AussieSilver

ASKER

Do you have time to do a small edit to my code ?

Gertone (Geert Bormans)

likely later this afternoon, in a telconf at the moment