467,149 Members | 1,206 Online
Bytes | Developer Community
Ask Question

Home New Posts Topics Members FAQ

Post your question to a community of 467,149 developers. It's quick & easy.

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
Feb 6 '06 #1
  • viewed: 1453
Share:
1 Reply
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.

Similar topics

3 posts views Thread by fbwhite@online.nospam | last post: by
2 posts views Thread by JWL | last post: by
5 posts views Thread by Daniel Frey | last post: by
3 posts views Thread by =?Utf-8?B?U3ViYQ==?= | last post: by
8 posts views Thread by Mark Shroyer | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.