Dynamic stylesheet loading and tag overlap

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
Received on Tue Feb 7 21:36:27 2006