[XML-DEV Mailing List Archive Home] [By Thread] [By Date] [Recent Entries] [Reply To This Message]

RE: Newbie needs help w/ proper display of XML w/ XSL+CSS in I


karen dec
THis code:

<xsl:template match="/">
    <xsl:apply-templates/>
    <html>
      ...

is outtputting a load of stuff before the <html> start tag. Since this makes
it invalid HTML, it's not surprising that different browsers display it in
different ways.

Michael Kay
http://www.saxonica.com/
 

> -----Original Message-----
> From: Karen Dec [mailto:brightgirl@m...] 
> Sent: 22 April 2006 04:06
> To: xml-dev@l...
> Subject:  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 &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;}
> 
> -----------------------------------------------------------------
> The xml-dev list is sponsored by XML.org 
> <http://www.xml.org>, an initiative of OASIS 
> <http://www.oasis-open.org>
> 
> The list archives are at http://lists.xml.org/archives/xml-dev/
> 
> To subscribe or unsubscribe from this list use the subscription
> manager: <http://www.oasis-open.org/mlmanage/index.php>
> 


PURCHASE STYLUS STUDIO ONLINE TODAY!

Purchasing Stylus Studio from our online shop is Easy, Secure and Value Priced!

Buy Stylus Studio Now

Download The World's Best XML IDE!

Accelerate XML development with our award-winning XML IDE - Download a free trial today!

Don't miss another message! Subscribe to this list today.
Email
First Name
Last Name
Company
Subscribe in XML format
RSS 2.0
Atom 0.3
 

Stylus Studio has published XML-DEV in RSS and ATOM formats, enabling users to easily subcribe to the list from their preferred news reader application.


Stylus Studio Sponsored Links are added links designed to provide related and additional information to the visitors of this website. they were not included by the author in the initial post. To view the content without the Sponsor Links please click here.

Site Map | Privacy Policy | Terms of Use | Trademarks
Free Stylus Studio XML Training:
W3C Member
Stylus Studio® and DataDirect XQuery ™are products from DataDirect Technologies, is a registered trademark of Progress Software Corporation, in the U.S. and other countries. © 2004-2013 All Rights Reserved.