By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,712 Members | 2,111 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,712 IT Pros & Developers. It's quick & easy.

Dynamic stylesheet loading and tag overlap

P: n/a
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
Feb 6 '06 #1
Share this Question
Share on Google+
1 Reply


P: n/a
VK

Andrew Poulos wrote:
var oStyle = document.createElement("STYLE");


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

Feb 6 '06 #2

This discussion thread is closed

Replies have been disabled for this discussion.