var myHtmlHead = "<link href='/foo/my.css'...";
var myHtmlBody = "<div id='foo'>...'";
var myWindow= window.open("", "MyWindow","height=500,width=500");
myWindow.document.head.innerHTML = myHtmlHead;
myWindow.document.body.innerHTML = myHtmlBody;
Found the answer with continued experiment. In my own case, I was able to get much more consistent results but setting setting the
<head> html with the CSS links AFTER setting the
<body> content. IE seems to handle the application of the CSS much better this way round, though I cant say why.
Previously it seemed like styling (colours, fonts, backgrounds etc) were being applied, but not positional things such as sizes, locations, display layouts etc. Setting the
<head> after setting the
<body> content seems to address this.