need help with stylesheet and FireFox

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Robi
    #1

    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:0 px;left:0px">
    <div style="position :relative">
    <div id="third-1" style="position :absolute;top:0 px;left:0;heigh t:-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:0 px;left:0;heigh t:-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:0 px;left:0;heigh t:-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.styleS heets and CSS.addRule() or if the agent doesn't
    support it, with appendChild(doc ument.createTex tNode(CSSSelect or+'{'+CSSPrope rties+'}'))

    Now so far the CSS entries are being created:
    AddCSSRule('.th ird-div','position: absolute; top: 0px; left: 0; height: -10; width: -10; text-align: center');
    AddCSSRule('.th ird-1','font-family: Verdana, sans-serif; font-size: 1; color: #ff0000; font-weight: bold;');
    AddCSSRule('.th ird-2','font-family: Verdana, sans-serif; font-size: 1; color: #00ff00; font-weight: bold;');
    AddCSSRule('.th ird-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.create Element("div") and so on,
    which now creates the following:

    <div id="first" style="position :absolute;top:0 px;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
    Tags: None
    • RobG
      #2
      Re: need help with stylesheet and FireFox

      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('.th ird-div','...');
      > AddCSSRule('.th ird-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

        Comment

        • Robi
          #3
          Re: need help with stylesheet and FireFox

          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('.th ird-div','...');
          >> AddCSSRule('.th ird-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"?

            Comment

            • Beauregard T. Shagnasty
              #4
              Re: need help with stylesheet and FireFox

              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:
              Web Development – BenMeadowcroft.com
              http://www.benmeadowcroft.com/webdev/


              --
              -bts
              -This space intentionally left blank.

                Comment

                Previous template Next
                Working...