need help with stylesheet and FireFox

Giganews Newsgroups
Subject: need help with stylesheet and FireFox
Posted by:  Robi (…@privacy.net)
Date: Wed, 3 Aug 2005

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

Replies