Dynamic stylesheet loading and tag overlap

[Andrew Poulos]

I'm using the following to dynamically add a style sheet with larger
font sizes:

if (document.createStyleSheet) {
document.createStyleSheet("extras/styles_large.css");
} else {
var oStyle = document.createElement("STYLE");
oStyle.type = "text/css";
var txt = document.createTextNode("@import
url(extras/styles_large.css);")
oStyle.appendChild(txt);
document.getElementsByTagName("head")[0].appendChild(oStyle);
}

This works fine in IE and FF 1.5 except that FF causes text with nested
tags to overlap. For example,

<p>This is some <span style="font-weight:bold;">sample</span> text.</p>

causes the words "some" and "text" to overlap the word "sample" (as
though the default kerning has been ignored). This does not happen if I
load the new style sheet normally (i.e. in the HEAD).

Is this a limitation of dynamically loaded style sheets in FF, an error
in the way I'm loading the style sheet, or a question for the CSS NG?

Andrew Poulos

 

[VK]

var oStyle = document.createElement("STYLE");

var oStyle = document.createElement('LINK');
oStyle.id = 'foo';
oStyle.rel = 'stylesheet';
oStyle.href = '...';
....
document.documentElement.firstChild.appendChild(oStyle);
....