[xsl] Firefox/mozilla XSL and having result styled by CSS

Subject: [xsl] Firefox/mozilla XSL and having result styled by CSS
From: Robert Koberg <rob@xxxxxxxxxx>
Date: Fri, 17 Mar 2006 10:42:46 -0500
Hi,

I am using a frameset as a container for frame that should get filled with the result of a client side transformation. The frameset holds the source XML DOMDocument, the XSLTProcessor, and the javascript (firefox code below) necessary to do the transformation.

When the frame is loaded there is no src page. The result of the transform is a full (X)HTML page (with DocType). In both IE and Firefox, the transformation occurs successfully and the HTML is placed in the frame.

-- The Problem -- (using Firefox 1.5.0.1)
No matter what I do (and I have tried many things) I cannot get the CSS to be used by the transformed HTML in firefox ONLY (works in IE). If I use the HTML copied from the firefox DOM Inspector and create a static test page in the same dir as the frameset page it uses the CSS correctly.


One other thing I have tried that comes close to working is load a page from the frame's src attribute that only contains the DocType and an HTML element. I then got the HEAD and BODY element from the transformation result and used htmlElem.appendChild(headElem) and htmlElem.appendChild(bodyElem). This picks up some CSS but does not look nearly the same as when copying the DOM Inspector's HTML and creating the static file.

Does anybody know how to write a transformation result and get it to use CSS correctly? Here are the link elements for the CSS:

<link rel="stylesheet" type="text/css" media="screen" href="css/styles.css"/>
<link rel="stylesheet" type="text/css" media="print" href="css/print.css" />


thanks for any help,
-Rob

JavaScript Code:

var targetFill = xslProc.transformToDocument(xmlDoc, document);
// This next line does not produce the DocType
//var targetFill = xslProc.transformToFragment(xmlDoc, document);

//The next line below does set the URL, if not present the
//targetFill.URL is undefined
//targetFill.URL = location.href;

var serializer = new XMLSerializer();
newPage = serializer.serializeToString(targetFill);
// This alert shows that the transform occurs successfully
alert(newPage);
// I can also get the source from the DOM Inspector tool

// 'target' is a frames document object
target.open();
//This writes all the HTML to the page
// can't figure out any way to write a full page to a frame
target.write(newPage);
target.close();

var serializer = new XMLSerializer();
// STRANGELY this and the alert below show that there is only a head
// with one link/@rel='stylesheet' element
alert(serializer.serializeToString(target.documentElement));
alert(target.documentElement.innerHTML);

//tried for the hell of it - does nothing to the HTML displayed
//target.documentElement.innerHTML = target.documentElement.innerHTML;

Current Thread