[
Lists Home |
Date Index |
Thread Index
]
Hello out there...
I am a newbie trying to learn how to use XSL and CSS to display my
XML data. I've created a display page for my collection of Amy Grant
CDs just as something silly to practice on!
It displays exactly how I want it to in Firefox. However, in IE 6 I
have a couple problems (surprise, surprise, right?):
1. IE 6 displays all my XML data in text format at the top of the
page BEFORE displaying the XSL transformed version. What is causing
this? It does not happen in Firefox.
2. IE 6 completely ignores the <caption> at the top of the table,
which displays correctly in Firefox.
If anyone has any ideas that could help me with these problems, I
would greatly appreciate it... I'm sure it's probably some simple
thing to most of you out there...
Here's a link to the page as it stands: http://stu.wccnet.edu/~kdec/
inp170/ophw2.xml
Here is the top part of my XML code. To save space I'll only give you
from the top through the first set of data. After that, the data just
repeats for each CD:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="ophw2.xsl"?>
<amydiscs>
<disc>
<element1>amygrant.gif</element1>
<date>1977</date>
<title>Amy Grant</title>
<length>36:33</length>
<label>Myrrh/Word</label>
<producer>Chris Christian</producer>
<description>Amy Grant is the first album by then-teenage
Christian singer Amy Grant. Although today considered a modest record
success, this was probably one of the biggest Christian album
releases ever when it was issued. At that time, CCM was a tiny
subgenre, sold exclusively at Christian bookstores. But the album was
a breakthrough in terms of the Christian music market of the day,
selling 50,000 copies in one year. Three songs from the album made
Top Ten Christian radio airplay: "Old Man's Rubble," "Beautiful
Music," and "What A Difference You've Made."</description>
<charts></charts>
<awards></awards>
</disc>
Here is my XSL code in its entirety:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/
Transform">
<xsl:template match="/">
<xsl:apply-templates/>
<html>
<head>
<title>Amy Grant CD Collection</title>
<link rel="stylesheet" href="ophw2.css" type="text/css" media="all" />
</head>
<body>
<table width="750" cellpadding="5" cellspacing="0" border="1"
summary="Chronological listing of recordings by Christian singer Amy
Grant, including date of release, title, length, record label,
producer, album description, chart success, and awards">
<caption><div id="headertext">Karen's <strong>Amy Grant</strong> CD
Collection</div></caption>
<tfoot>
<tr>
<td colspan="3">Coming soon: Amy Grant Live CD & DVD!</td>
</tr>
</tfoot>
<tbody>
<xsl:for-each select="amydiscs/disc">
<tr>
<td rowspan="2" id="image">
<img>
<!-- -->
<xsl:attribute name="ALT">
<xsl:text>Album Cover Art</xsl:text>
</xsl:attribute>
<!-- -->
<xsl:attribute name="BORDER">
<xsl:text>0</xsl:text>
</xsl:attribute>
<!-- -->
<xsl:attribute name="HEIGHT">
<xsl:text>108</xsl:text>
</xsl:attribute>
<!-- -->
<xsl:attribute name="SRC">
<xsl:value-of select="element1"/>
</xsl:attribute>
<!-- -->
<xsl:attribute name="WIDTH">
<xsl:text>108</xsl:text>
</xsl:attribute>
<!-- -->
</img>
</td>
<td id="title"><xsl:value-of select="title"/></td>
<td id="date"><xsl:value-of select="date"/></td>
</tr>
<tr>
<td colspan="2" id="description"><xsl:value-of
select="description"/></td>
</tr>
<tr>
<td rowspan="3" id="info"><strong>Length:</
strong><xsl:text> </xsl:text><xsl:value-of select="length"/><br/
><strong>Label:</strong><xsl:text> </xsl:text><xsl:value-of
select="label"/><br/><strong>Producer(s):</strong><xsl:text> </
xsl:text><br/><xsl:value-of select="producer"/></td>
<td colspan="2" id="charts"><strong>Chart Success:</strong><br/
><xsl:value-of select="charts/chart1"/><br/><xsl:value-of
select="charts/chart2"/></td>
</tr>
<tr>
<td colspan="2" rowspan="2" id="awards"><strong>Awards:</
strong><br/><xsl:value-of select="awards/award1"/><br/><xsl:value-of
select="awards/award2"/><br/><xsl:value-of select="awards/award3"/></td>
</tr>
<tr>
</tr>
<tr>
<td colspan="3" id="empty"></td>
</tr>
</xsl:for-each>
</tbody>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
And finally, here is the CSS:
body {background: #eee; color: #000; font: 12px verdana, geneva,
lucida, arial, sans-serif;}
table {margin: 0;}
tbody {background: #fff;}
tfoot {text-align: center; background: #fff; color: blue; font-
weight: bold;}
#title, #date {font-weight: bold; color: blue; vertical-align: top;
height: 15px;}
caption {font-size: 32px; border: 1px solid #000; border-bottom:
none; padding: 10px; margin: 0; background: #fff; background-image:
url(amyheader.gif); background-position: top right; height: 200px;
background-repeat: no-repeat;}
#headertext {position: absolute; top: 118px; left: 10px; background:
#bcecfa; padding: 25px; border-top: 1px dashed #000; border-right:
1px dashed #000;}
#description, #charts, #awards {font-size: 11px; vertical-align: top;}
#image {text-align: center; vertical-align: middle;}
#empty {background: #bcecfa;}
#info {vertical-align: top; font-size: 11px;}
|
