need help with stylesheet and FireFox

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

Robi wrote:[color=blue]
> ok, I have a page, where the DOM is being updated by JavaScript.[/color]
[...][color=blue]
> <font face="Verdana" size="1" color="#ff0000">[/color]
[...][color=blue]
> Now so far the CSS entries are being created:
> AddCSSRule('.third-div','...');
> AddCSSRule('.third-1','... font-size: 1; ...');[/color]

And here is the problem --------^^^^^^^^^^^^

You can't simply move old font size attribute values to CSS font-size
properties - they are very different things.

[...][color=blue]
> 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 ;-)
>[/color]

When specifying a font-size you have the options listed here:

<URL:http://www.w3.org/TR/REC-CSS2/fonts.html#font-size-props>

The short answer is that if you use a value like '1' you must also use a
unit (px, em, ex, pt, etc.).

Whatever Firefox is interpreting your units as they are small (so
obviously not em or ex, but maybe pt or px).

The solution is to add a unit, px is not liked because IE will not scale
it, so try em or ex (or whatever suits).

[...]

--
Rob

RobG wrote:[color=blue]
> Robi wrote:[color=green]
>> ok, I have a page, where the DOM is being updated by JavaScript.[/color]
> [...][color=green]
>> <font face="Verdana" size="1" color="#ff0000">[/color]
> [...][color=green]
>> Now so far the CSS entries are being created:
>> AddCSSRule('.third-div','...');
>> AddCSSRule('.third-1','... font-size: 1; ...');[/color]
>
> And here is the problem -------^^^^^^^^^^^^
>
> You can't simply move old font size attribute values to CSS font-size
> properties - they are very different things.[/color]

one would have thunk they'd keep them the same .... ;-)

[...][color=blue][color=green]
>> What can I change to get the same result as I had before?
>> but without having the <font> tag reinstated ;-)[/color]
>
> When specifying a font-size you have the options listed here:
>
> <URL:http://www.w3.org/TR/REC-CSS2/fonts.html#font-size-props>
>
> The short answer is that if you use a value like '1' you must also use a
> unit (px, em, ex, pt, etc.).[/color]
ok, hmmmm... well, W3C is somehow 'obscure' about what to use...
but with your list I found lotsa places which explain it better than W3C
[color=blue]
>
> Whatever Firefox is interpreting your units as they are small (so
> obviously not em or ex, but maybe pt or px).
>
> The solution is to add a unit, px is not liked because IE will not scale
> it, so try em or ex (or whatever suits).[/color]

Thanks! em did the trick in FF :)
oops, spoke too soon...
that is, until I realized that em is a 'relative' size whereas I need it
'fixed' or 'absolute'... whenever I increase the text size of the page,
my little widget increases its text size and blows it out of proportion.

Is there an attribute "no-resize"?

Robi wrote:[color=blue]
> Thanks! em did the trick in FF :)[/color]

I prefer percents. Some versions of IE have trouble interpreting em.
[color=blue]
> oops, spoke too soon...
> that is, until I realized that em is a 'relative' size whereas I
> need it 'fixed' or 'absolute'... whenever I increase the text size
> of the page, my little widget increases its text size and blows it
> out of proportion.[/color]

Then there are design errors on the rest of the page.
[color=blue]
> Is there an attribute "no-resize"?[/color]

No, and you can't stop a proper user agent from resizing your page,
either. Best you use "relative" sizing for everything.

Have a look at a few of Ben Meadowcroft's templates:
http://www.benmeadowcroft.com/webdev/

--
-bts
-This space intentionally left blank.

need help with stylesheet and FireFox

re: need help with stylesheet and FireFox

re: need help with stylesheet and FireFox

re: need help with stylesheet and FireFox

Similar HTML / CSS bytes

/bytes/development

/bytes/it

/bytes/about