[XML-DEV Mailing List Archive Home] [By Thread] [By Date] [Recent Entries] [Reply To This Message] Newbie needs help w/ proper display of XML w/ XSL+CSS in IE6
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;}
|
PURCHASE STYLUS STUDIO ONLINE TODAY!Purchasing Stylus Studio from our online shop is Easy, Secure and Value Priced! Download The World's Best XML IDE!Accelerate XML development with our award-winning XML IDE - Download a free trial today! Subscribe in XML format
|