FacebookTwitter
Hatrack River Forum   
my profile login | search | faq | forum home

  next oldest topic   next newest topic
» Hatrack River Forum » Active Forums » Books, Films, Food and Culture » Web development help

   
Author Topic: Web development help
ricree101
Member
Member # 7749

- posted      Profile for ricree101   Email ricree101         Edit/Delete Post 
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?
Posts: 2437 | Registered: Apr 2005  |  IP: Logged | Report this post to a Moderator
fugu13
Member
Member # 2859

- posted      Profile for fugu13   Email fugu13         Edit/Delete Post 
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.
Posts: 15770 | Registered: Dec 2001  |  IP: Logged | Report this post to a Moderator
ricree101
Member
Member # 7749

- posted      Profile for ricree101   Email ricree101         Edit/Delete Post 
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;
}
Posts: 2437 | Registered: Apr 2005  |  IP: Logged | Report this post to a Moderator
fugu13
Member
Member # 2859

- posted      Profile for fugu13   Email fugu13         Edit/Delete Post 
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.
Posts: 15770 | Registered: Dec 2001  |  IP: Logged | Report this post to a Moderator
ricree101
Member
Member # 7749

- posted      Profile for ricree101   Email ricree101         Edit/Delete Post 
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
Posts: 2437 | Registered: Apr 2005  |  IP: Logged | Report this post to a Moderator
fugu13
Member
Member # 2859

- posted      Profile for fugu13   Email fugu13         Edit/Delete Post 
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?
Posts: 15770 | Registered: Dec 2001  |  IP: Logged | Report this post to a Moderator
ricree101
Member
Member # 7749

- posted      Profile for ricree101   Email ricree101         Edit/Delete Post 
I've gotten it working now, thanks for all of your help on this.
Posts: 2437 | Registered: Apr 2005  |  IP: Logged | Report this post to a Moderator
   

   Close Topic   Feature Topic   Move Topic   Delete Topic next oldest topic   next newest topic
- Printer-friendly view of this topic
Hop To:


Contact Us | Hatrack River Home Page

Copyright © 2008 Hatrack River Enterprises Inc. All rights reserved.
Reproduction in whole or in part without permission is prohibited.


Powered by Infopop Corporation
UBB.classic™ 6.7.2