ok, I have a page, where the DOM is being updated by JavaScript.
in the original version, there is a document.write creating the following:
<div id="first" style="position:absolute;top:0px;left:0px">
<div style="position:relative">
<div id="third-1" style="position:absolute;top:0px;left:0;height:-10;width:-10;text-align:center">
<font face="Verdana" size="1" color="#ff0000">
<B>text-1</B>
</font>
</div>
<div id="third-2" style="position:absolute;top:0px;left:0;height:-10;width:-10;text-align:center">
<font face="Verdana" size="1" color="#00ff00">
<B>text-2</B>
</font>
</div>
<div id="third-3" style="position:absolute;top:0px;left:0;height:-10;width:-10;text-align:center">
<font face="Verdana" size="1" color="#0000ff">
<B>text-3</B>
</font>
</div>
</div>
</div>
Don't ask me about the negative height and width attributes in the <div> tags,
but it seemed to work. Also the <font size=1> seemed to work, but now comes the
thing: since <font> is deprecated according to the holy W3C, I decided to remove
the <font> tag and implement a stylesheet.
So I create a "on-the-fly" stylesheet in the script, place it in the DOM <head>
as it should with document.styleSheets and CSS.addRule() or if the agent doesn't
support it, with appendChild(document.createTextNode(CSSSelector+'{ '+CSSProperties+'}'))
Now so far the CSS entries are being created:
AddCSSRule('.third-div','position: absolute; top: 0px; left: 0; height: -10; width: -10; text-align: center');
AddCSSRule('.third-1','font-family: Verdana, sans-serif; font-size: 1; color: #ff0000; font-weight: bold;');
AddCSSRule('.third-2','font-family: Verdana, sans-serif; font-size: 1; color: #00ff00; font-weight: bold;');
AddCSSRule('.third-3','font-family: Verdana, sans-serif; font-size: 1; color: #0000ff; font-weight: bold;');
this creates the following withouth my "#comments":
<style type="text/css">
#the following is for the third nested <div> blocks
.third-div {position: absolute; top: 0px; left: 0; height: -10; width: -10; text-align: center;}
#these three are for the <p> in the third nested <div> blocks
.third-1 {font-family: Verdana, sans-serif; font-size: 1; color: #ff0000; font-weight: bold;}
.third-2 {font-family: Verdana, sans-serif; font-size: 1; color: #00ff00; font-weight: bold;}
.third-3 {font-family: Verdana, sans-serif; font-size: 1; color: #0000ff; font-weight: bold;}
</style>
the document.write is being changed to document.createElement("div") and so on,
which now creates the following:
<div id="first" style="position:absolute;top:0px;left:0px">
<div style="position:relative">
<div id="third-1" class="third-div">
<p class="third-1">text-1</p>
</div>
<div id="third-2" class="third-div">
<p class="third-2">text-2</p>
</div>
<div id="third-3" class="third-div">
<p class="third-3">text-3</p>
</div>
</div>
</div>
now somehow the font size, when used with <p> seems to make the
text on FF illegible small, whereas on IE6 the text seems to have
a normal size.
Can anybody tell me why FF reacts that way? I mean, it worked with
the <font> tag just like IE6, but with the <p> it just doesn't.
What can I change to get the same result as I had before?
but without having the <font> tag reinstated ;-)
thanks for any help
