RSS/XML with XSLT and CSS issues

**agraham83** · Feb 23, 2009 10:19

Hi All,
I've been trying to develop a styled XML feed by using XSLT and CSS but have ran into issues trying to debug some display issues. At the moment it displays as it should in Chrome, but in both IE7 and FF3 are using there default Stylesheets despite my best efforts. I've validated my XML and I know it meets the standards, I just can't see where my code is wrong and would appreciate any help.

XML

Code:

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="rss.xsl" ?>
<rss version="2.0" xmlns:atom="...">
	<channel>
             <item>
                     .....
             </item>
	</channel>
</rss>

XSLT

Code:

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" 
	xmlns:xsl="...">
	<xsl:template match="/">
		<html>
			<head>
				<title>
					<xsl:value-of select="rss/channel/title" />
				</title>
				<style type="text/css">@import url("rss.css");</style>
			</head>
			<body>
				<div class="header">
					<img
						src="..."
						alt="..." />
				</div>

				<div class="content">
					<table>
						<tbody>
							<tr valign="top">
								<td>
									<div style="width:600px">
										<xsl:for-each
											select="rss/channel/item">
											<p>
												<a href="{link}"
													rel="bookmark">
													<xsl:value-of
														select="title" />
												</a>
												Date:
												<xsl:value-of
													select="pubDate" />
											</p>
										</xsl:for-each>
									</div>
								</td>
								<td>
									<div class="right">
										<h2>
											...
										</h2>
										<p>
											...
										</p>
										<h2>...
										</p>
									</div>
								</td>
							</tr>
						</tbody>
					</table>
				</div>

				<div class="footer">
					<h4>
						&#169; ...
					</h4>
				</div>
			</body>
		</html>
	</xsl:template>
</xsl:stylesheet>

CSS:

Code:

<style type ="text/css">

body {
	margin: 8px;
	font-family: verdana, arial;
}

table {
	width: 100&#37;;
	vertical-align: top;	
}

div.left {
}

div.right {
	width: 250px; 
	position: absolute;
	right: 10px;
}

div.header {
	height: 35px;
	margin-bottom: 10px;
	display: block;
}

div.content {
	border-top: thin solid #006633;
	border-bottom: thin solid #006633;
	display: block;
}

div.footer {
	display: block;
	height: 13px;
	margin-top: 12px;
}
</style>

... = links or content I have removed to simplify the code or get round the fact I can't post URL links on this site.

Thanks

**Mittineague** · Feb 23, 2009 13:59

Hi agraham83, welcome to the forums,

AFAIK, "best practice" would be something like

Code XML:

<style type="text/css">
	<xsl:comment>
		body {
			margin: 8px;
			font-family: verdana, arial;
		}
 
		table {
			width: 100%;
			vertical-align: top;	
		}
 
		div.left {
		}
 
		div.right {
			width: 250px; 
			position: absolute;
			right: 10px;
		}
 
		div.header {
			height: 35px;
			margin-bottom: 10px;
			display: block;
		}
 
		div.content {
			border-top: thin solid #006633;
			border-bottom: thin solid #006633;
			display: block;
		}
 
		div.footer {
			display: block;
			height: 13px;
			margin-top: 12px;
		}
	</xsl:comment>
</style>

If it works like that, then it may be that it's the @import that's causing the problem.

**agraham83** · Feb 24, 2009 06:08

Thanks for the welcome and the help Mittineague. Unfortunately the xsl:comment tags didn't resolve the issues.

I've even tried:

Code:

<link rel="stylesheet" type="text/css"
                   href="..." />

instead of:

Code:

<style type="text/css">@import url("...");</style>

and it made no difference in Chrome, IE7 or FF3. However having looked more into other RSS feeds it seems this is not unusual. For example at telegraph.co.uk/news/uknews/rss this behaves exactly like the code I have produced i.e. Chrome = working, FF3 and IE7 = default stylesheet.

Has anyone had experience of this, as at the moment IE and FF completely ignore both the XSLT (and thus CSS).

I am completely stumped

**Mittineague** · Feb 24, 2009 12:41

AFAIK, CSS should would for both XML and HTML, but maybe?

Code XML:

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" 
	xmlns:xsl="...">
	<xsl:output method="html"/>
	<xsl:template match="/">

* The "telegraph" styles are applied for Opera 9.27 but Firefox 2.0.0.20 ignores the XSLT

It seems to be a reader/browser thing more than something with your code.

User Tag List

Thread: RSS/XML with XSLT and CSS issues

Thread Tools

Display

RSS/XML with XSLT and CSS issues

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions