Hatrack River Forum: Web development help

This is topic Web development help in forum Books, Films, Food and Culture at Hatrack River Forum.

To visit this topic, use this URL:
http://www.hatrack.com/ubb/main/ultimatebb.php?ubb=get_topic;f=2;t=049045

Posted by ricree101 (Member # 7749) on :

I've been trying to learn xsl, and I've been running into a frustrating issue in Firefox. I tried googling without any luck, and I was hoping someone here might know the answer. Basically, I am trying to include a css file in an xsl file so that the xsl can use classes defined in my css file. In IE 6 it works fine, but in firefox the color settings don't work. The positioning and size is correct, but the background and text colors aren't changed.

Does anyone have any idea what I might be doing wrong, or how I could go about debugging this?

Posted by fugu13 (Member # 2859) on :

Is this XSLT or XSL-FO? Since you're talking about a web browser, I'll assume XSLT.

I'm not sure what would be particularly causing the problem, but I suggest taking a look at this series of tutorials:

http://www.ibm.com/developerworks/views/xml/libraryview.jsp?search_by=display+XML+with+cascading+stylesheets

Also, if you post a link to your efforts, it might be possible to provide specific advice.

Posted by ricree101 (Member # 7749) on :

Here's the code I am using. It is getting some of the information from the stylesheet, but anything effecting color seems to be ignored. When being used with an HTML file, everything works fine.

code:

 <?xml version="1.0" encoding="ISO-8859-1"?>
<html xsl:version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<head>
<style type="text/css">
</style>
<link rel="stylesheet" type="text/css" 
	href="style.css" />
</head>
	<body>
		<xsl:for-each select="list">
		<div class="list">
		<xsl:for-each select="listItem">
			<div class="listItem">
				<a class="list">
					<xsl:attribute name = "href">
						<xsl:value-of select="url"/>
					</xsl:attribute>
					<xsl:value-of select="title"/>
				</a><br/>
				<p><xsl:value-of select="text"/></p>
			</div>
		</xsl:for-each>
		</div>
	</xsl:for-each>
	</body>
</html>

code:

 body{
background-color: 3399FF;/*0066CC*/
color: 000000;
padding-left: 2%;
padding-right: 2%;
}
div.outer
{
color: 000000;
background-color: #0044AA;/*003366*/
border-bottom-width: 2;
border-bottom-color: #00D0DD;
border-bottom-style: solid;
padding-left: 2%;
padding-right: 2%;
padding-bottom: 3;
}
div.inner
{
border-top-width: 3;
border-top-color: 00D0DD;
border-top-style: solid;
padding-left: 5%;
padding-right: 5%;
padding-top: 20;
background-color: FAFAFF;/*66CCFF*/
}
div.list
{
line-height: 130%;
padding-top:4;
padding-bottom:4;
}
div.listItem
{
padding-top: 10;
padding-bottom:5;
padding-left: 15;
padding-right: 15;
font-weight: bold;
background-color: EAEAEF;
border-bottom-width: 5;
border-left-width:7;
border-right-width:1;
border-color: 003366;
border-style: solid;
}
a:link
{
text-decoration: none;
font-weight: 900;
font-size: 115%;
font-family: arial, sans-serif;
padding-bottom: 5;
padding-top: 5;
padding-left: 4;
padding-right: 4;
}
a:visited
{
text-decoration: none;
font-weight: 900;
font-size: 115%;
font-family: arial, sans-serif;
padding-bottom: 10;
padding-top: 7;
padding-left: 4;
padding-right: 4;
}
a.list:link
{
color: 000610;
padding-top:15;
}
a.list:visited
{
color: 000610;
padding-top:15;
}
a.menu:link
{
color: 000000;
}
a.menu:visited
{
color: 000000;
}
a:hover
{
text-decoration: underline;
font-weight: 900;
}

Posted by fugu13 (Member # 2859) on :

First, every hex color should be prepended with a # sign to be legal CSS. In fact, there are a number of CSS errors.

Fix all the errors found by this validator:

http://jigsaw.w3.org/css-validator/#validate-by-input

If I fix those errors and open the following xml document in firefox, with your stylesheet saved as style.css and your XSLT file saved as index.xsl, I get working colors:

code:

<?xml-stylesheet href="index.xsl"
type="text/xsl"?>
<list>
		<listItem>
			<url>http://example.org</url>
			<title>This Be My Title</title>
			<text>Orange!</text>
		</listItem>
</list>

The reason it works with HTML only probably has to do with the difference between standards and quirks mode. Your HTML file probably loaded in quirks mode, but I bet the output of XSL Transformations only gets handled with standards mode. In standards mode, it doesn't know how to handle your CSS, because it isn't legal CSS.

Posted by ricree101 (Member # 7749) on :

Thank you for pointing me to the validator, but even after fixing the errors it is still not working for me.

Here is the fixed version of the css. It passes the validator, but otherwise doesn't seem to have a change in the output.

code:

body{
background-color: #3399FF;/*0066CC*/
color: #000000;
padding-left: 2%;
padding-right: 2%;
}
div.outer
{
color: #000000;
background-color: #0044AA;/*003366*/
border-bottom-width: 2px;
border-bottom-color: #00D0DD;
border-bottom-style: solid;
padding-left: 2%;
padding-right: 2%;
padding-bottom: 3px;
}
div.inner
{
border-top-width: 3px;
border-top-color: #00D0DD;
border-top-style: solid;
padding-left: 5%;
padding-right: 5%;
padding-top: 20px;
background-color: #FAFAFF;/*66CCFF*/
}
div.list
{
line-height: 130%;
padding-top:4px;
padding-bottom:4px;
}
div.listItem
{
padding-top: 10px;
padding-bottom:5px;
padding-left: 15px;
padding-right: 15px;
font-weight: bold;
background-color: #EAEAEF;
border-bottom-width: 5px;
border-left-width:7px;
border-right-width:1px;
border-color: #003366;
border-style: solid;
}
a:link
{
text-decoration: none;
font-weight: 900;
font-size: 115%;
font-family: arial, sans-serif;
padding-bottom: 5px;
padding-top: 5px;
padding-left: 4px;
padding-right: 4px;
}
a:visited
{
text-decoration: none;
font-weight: 900;
font-size: 115%;
font-family: arial, sans-serif;
padding-bottom: 10px;
padding-top: 7px;
padding-left: 4px;
padding-right: 4px;
}
a.list:link
{
color: #000610;
padding-top:15px;
}
a.list:visited
{
color: #000610;
padding-top:15px;
}
a.menu:link
{
color: #000000;
}
a.menu:visited
{
color: #000000;
}
a:hover
{
text-decoration: underline;
font-weight: 900;
}

Thanks again for all your help

Posted by fugu13 (Member # 2859) on :

Works just fine for me; blue background for the main page, link is no longer blue (not sure what color it is, its very dark), light grey for the main div background. Of course, some of your styles don't apply because elements that match the selectors don't exist.

What XML file are you trying this on? Have you tried it on mine?

Posted by ricree101 (Member # 7749) on :

I've gotten it working now, thanks for all of your help on this.