OASIS Mailing List ArchivesView the OASIS mailing list archive below
or browse/search using MarkMail.

 


Help: OASIS Mailing Lists Help | MarkMail Help

 


 

   Newbie needs help w/ proper display of XML w/ XSL+CSS in IE6

[ 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 &amp; 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>&#xA0;</xsl:text><xsl:value-of select="length"/><br/ 
 ><strong>Label:</strong><xsl:text>&#xA0;</xsl:text><xsl:value-of  
select="label"/><br/><strong>Producer(s):</strong><xsl:text>&#xA0;</ 
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;}




 

News | XML in Industry | Calendar | XML Registry
Marketplace | Resources | MyXML.org | Sponsors | Privacy Statement

Copyright 2001 XML.org. This site is hosted by OASIS