On Display: XML Web Pages with Internet Explorer 5.x

May 2, 2000

Table of Contents
	• Overview
	• Testing Code
	• More Complex Tests
	• Building a Cross-Browser XML Page: Subset Approach
	• Building a Cross-Browser XML Page: Duplication of Effort
	• Conclusion

In the final article of his series examining XML support in web browsers, Simon St. Laurent turns his attention to Microsoft's Internet Explorer. If you've not read Simon's report on Mozilla or Opera yet, I highly recommend reading them alongside this article -- E.D.

Overview

Microsoft's Internet Explorer browser for Windows and Macintosh renders XML content best using a technique very different from its Mozilla and Opera competitors: it relies on XSLT, and provides only a minimal level of Cascading Style Sheets (CSS) support for use with XML.

In general, Microsoft appears to be remaining far more dependent upon HTML for the presentation and linking tasks for which Mozilla and Opera use CSS and XLink. This leaves developers with a "support Microsoft, or support everyone else" problem. While there are ways around this, developers who want to support complex formatting in these two categories of browsers are going to have to write duplicate code, or possibly wait for the next generation of browsers.

(Of "historical" interest is this article from Tim Bray, reviewing the XML support in the original IE 5.0 for Windows, released in early 1999. Note that later versions of IE fix some of the bugs Tim mentions: pages formatted with XML+CSS now print, and you can use entity references within a document. CDATA sections also appear to work.)

Testing Code

In this review I tested Internet Explorer 5.0 for the Macintosh (the only browser covered in this series, it should be noted, that is actually shipping) and Internet Explorer 5.5 for Windows (preview release). The two IE browsers differ in the extent of their CSS support. In general, IE 5.0 for the Macintosh provides more complete CSS support, though it is missing support for some of the display property values that simplify tasks like building tables from XML information.

To start, we'll look at the original display1.xml example from the first article, which tests support for the display property's block, inline, hidden, list, and table values using a very simple style sheet.

Loaded into Mozilla M14, this document was rendered as shown in Figure 1. Figures 2 and 3 show this document as rendered by IE 5.0 for the Macintosh and IE 5.5 for Windows.

Figure 1: Loading the display test and its style sheet display1.css into Mozilla shows
what the document looks like when most values of the display property are supported.

Figure 2: Loading the display test and its style sheet display1.css into Internet Explorer 5.0
for the Macintosh shows that this browser supports block, inline, none and list values for
the display property, but not tables. List numbering continues to be buggy, though in a
different way than in Opera.

Figure 3: Loading the display test and its style sheet display1.css into Internet Explorer 5.5
for Windows shows that this browser supports block, inline, and none values for the display
property, but not lists or tables. In general, this rendering looks identical to that
produced by Internet Explorer 5.01.

More Complex Tests

Loading some of the more sophisticated examples of table usage into IE 5.0 for the Mac and IE 5.5 for Windows produces a rather large mess on the screen, as shown in Figures 4-7.

Apart from the general mess created by the lack of table support, these examples also demonstrate another set of tools Internet Explorer doesn't yet support: XML Linking. Where Mozilla supported an out-of-date draft and Opera provided support through style sheets, Internet Explorer requires the use of the HTML a element.

Figure 4: Loading the book table presentation and its style sheet books1.css into IE 5.0
for the Macintosh produces a run-on.

Figure 5: Loading the book table with images document and its style sheet books2.css
into IE 5.0 for the Macintosh shows that IE is picking up the HTML content for the images, even if it isn't recognizing the table structure.

Figure 6: Loading the book table presentation and its style sheet books1.css
into IE 5.5 for Windows produces a slightly different run-on.

Figure 7: Loading the book table with images document and its style sheet books2.css
into IE 5.5 for Windows demonstrates again that IE is picking up the HTML content
for the images, even if it isn't recognizing the table structure.

Building a Cross-Browser XML Page: Subset Approach

It's clear that the XML documents we constructed that worked in Mozilla and Opera won't work in Internet Explorer. So we'll explore the possibility of extending the code further so that it works in all three browsers at once.

One approach to building cross-browser applications when the browsers have wildly different feature sets is to confine yourself to the intersection of their features, the safest core possible. We'll start with the example created for Opera that also worked in Mozilla, and rework it so that it appears and works the same in both flavors of Internet Explorer as well.

This document is a similar list of books to the tables shown above, but will be presented as a list rather than a table. This way we only need support for block and inline display values, supported by all of the browsers we're testing.

In the document itself, we need to strip out the XLink attributes and replace them with explicit HTML a elements. Remember that Internet Explorer requires that the namespace prefix "html" be used in order for HTML vocabulary to be recognized. This produces revised code that looks like this:


                        
                        
<?xml version="1.0"?>

<?xml-stylesheet type="text/css" href="books4.css"?>

<catalog xmlns:html="http://www.w3.org/TR/REC-html40" >

<html:h1>XML Books</html:h1>

<book>

<cover>

<html:a href="http://www.amazon.com/exec/obidos/ISBN=007212220X/">

<html:img

  src="http://images.amazon.com/images/P/007212220X.01.MZZZZZZZ.jpg"/>

</html:a>

</cover>

<author>Simon St. Laurent</author>

<title>

<html:a href="http://www.amazon.com/exec/obidos/ISBN=007212220X/">

XML Elements of Style</html:a>

</title>

<pubyear>2000</pubyear>

<publisher>McGraw-Hill</publisher>

<isbn>0-07-212220-X</isbn>

<price>$29.99</price>

</book>

<book>

<cover>

<html:a href="http://www.amazon.com/exec/obidos/ISBN=0764532367/">

<html:img

  src="http://images.amazon.com/images/P/0764532367.01.MZZZZZZZ.jpg"/>

</html:a>

</cover>

<author>Elliotte Rusty Harold</author>

<title>

<html:a

  href="http://www.amazon.com/exec/obidos/ISBN=0764532367/">XML

  Bible</html:a>

</title>

<pubyear>1999</pubyear>

<publisher>IDG Books</publisher>

<isbn>0764532367</isbn>

<price>$49.99</price>

</book>

...

The style sheet can be radically simplified, since understood HTML behavior should handle the link formatting and processing.


                        
                        
catalog {display:block; }

book {display:block; padding:5px; }

book *{display:block;}

By appearances, this modified version should work fine in every browser, as shown below in Figures 8-11.

Figure 8: Loading the modified books catalog (books5.xml + books5.css) into IE 5.5 for Windows produces a document with active links and images.	Figure 9: Loading the modified books catalog (books5.xml + books5.css) into IE 5.0 for the Macintosh produces a document with visible links and images.
Figure 10: Loading the modified books catalog (books5.xml + books5.css) into Netscape 6 produces a document with active links and images.	Figure 11: Loading the modified books catalog (books5.xml + books5.css) into Opera 4 produces a document with active links, and almost presents images. (User intervention through a right-click is required.)

It all looks good, but there's one problem, seemingly unsolvable for now: Internet Explorer 5.0 for the Macintosh displays the links suggested by the html:a elements, but they aren't in fact traversable. The display behavior is supported, but the user interactions are not.

The subset approach is clearly too limited to achieve useful results.

Building a Cross-Browser XML Page: Duplication of Effort

The other approach to building cross-browser documents is to create resources that allow each browser to do what it does best. In this case, this approach will mean creating XSL style sheets to support Internet Explorer, and CSS style sheets to support Mozilla and Opera. Building and maintaining such combinations requires extra time and effort from developers, and may remain a significant bar to XML Web development for the near future.

Making this work will mean taking advantage of the xml-stylesheet processing instructions' ability to appear multiple times in a document. The first style sheet we'll offer to browsers will be a Microsoft XSL style sheet. The second will be a CSS style sheet meant for use by Opera and Mozilla. In the document itself, we just need to add a second line:


                        
                        
<?xml version="1.0"?>

<?xml-stylesheet type="text/xsl" href="book-table-ms.xsl"?>

<?xml-stylesheet type="text/css" href="books1.css"?>

The XSLT style sheets we create for this presentation have to conform to the older Microsoft XSL processor that originally shipped with Internet Explorer 5.0 for Windows, as support for the final version of XSLT is still in a preview version of the MSXML parser that isn't yet built into these browsers.


                        
                        
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">

<xsl:template match="/">

<html>

  <body>

    <table>

      <xsl:for-each select="catalog/book">

        <tr>

          <td><xsl:value-of select="author"/></td>

          <td><xsl:value-of select="title"/></td>

          <td><xsl:value-of select="pubyear"/></td>

          <td><xsl:value-of select="publisher"/></td>

          <td><xsl:value-of select="isbn"/></td>

          <td><xsl:value-of select="price"/></td>

        </tr>

      </xsl:for-each>

    </table>

  </body>

</html>

</xsl:template>

</xsl:stylesheet>

While it's much longer than the three lines of code used in books2.css, it does offer more flexibility. For this example, though, the most important fact is that it lets us produce similar-looking results across all four browsers. The IE renditions are shown in Figures 12 and 13.

Figure 12: Loading the multi-stylesheet books catalog (books1multi.xml + book-table-ms.xsl)
into IE 5.5 for Windows produces a table.

Figure 13: Loading the multi-stylesheet books catalog (books1multi.xml + book-table-ms.xsl)
into IE 5.0 for the Macintosh produces a table.

We can use a similar approach to create links that work for the XML book catalog shown earlier. The Microsoft XSL style sheet looks like this:




<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">

<xsl:template match="/">

<html>

  <body>

    <h1>XML Books</h1>

      <xsl:for-each select="catalog/book">

        <p>

          <a>

            <xsl:attribute name="href"><xsl:value-of

                  select="cover/@href"/></xsl:attribute>

            <img>

              <xsl:attribute name="src"><xsl:value-of 

                    select="cover/html:img/@src"/></xsl:attribute>

            </img>

          </a><br />



          <xsl:value-of select="author"/><br />

          <a>

            <xsl:attribute name="href"><xsl:value-of

              select="cover/@href"/></xsl:attribute>

            <xsl:value-of select="title"/><br />

          </a>



          <xsl:value-of select="pubyear"/><br />

          <xsl:value-of select="publisher"/><br />

          <xsl:value-of select="isbn"/><br />

          <xsl:value-of select="price"/><br />

        </p>

     </xsl:for-each>

  </body>

</html>

</xsl:template>

</xsl:stylesheet>

The results generated by this style sheet in IE 5.5 for Windows and in IE 5.0 for the Macintosh are shown below in Figures 14 and 15. (Netscape and Opera continue to use the CSS, producing the same results they did previously.)

Figure 14: Loading the multi-stylesheet books catalog (books4multi.xml + book-list-ms.xsl) into IE 5.5 for Windows produces a fully-functioning HTML document.

Figure 15: Loading the multi-stylesheet books catalog (books4multi.xml + book-list-ms.xsl) into IE 5.0 for the Macintosh produces a fully-functioning HTML document.

Conclusion

While this multiple-stylesheet approach works for now, the version of XSLT that Microsoft is using may cause problems if and when Mozilla and Opera add XSLT support, and these problems may also be affected by the timing of Microsoft's XSLT upgrade to production versions of its browsers. Fortunately, Microsoft is offering a converter from its XSLT to the final version.

It's a lot more work to build multiple style sheets, making XML browsing much less tantalizing than it might otherwise be. Hopefully, before long the browser vendors will converge on some kind of compatible vision of XML document presentation.

For your convenience, we've created a table summarizing the XML browsing features of Internet Explorer and the other browsers reviewed in this series.

Resources
	• Internet Explorer 5.0 for Macintosh: http://www.microsoft.com/mac/ie/default.htm
	• Internet Explorer 5.5 for Windows: http://www.microsoft.com/windows/ie/default.htm
	• MSDN XML Developer Center: http://msdn.microsoft.com/xml/default.asp
	• Microsoft XML Parser Technology Preview Release: http://msdn.microsoft.com/downloads/webtechnology/xml/msxml.asp