Fixing font size in FireFox?

Discussion in 'HTML' started by T.J., Jan 15, 2005.

  1. T.J.

    T.J. Guest

    Hi,
    How can I fix the font size for one
    particular piece of text when
    displayed in FireFox?
    TIA.
     
    T.J., Jan 15, 2005
    #1
    1. Advertising

  2. T.J. wrote:
    > How can I fix the font size for one particular piece of text when
    > displayed in FireFox?


    You can't, and you shouldn't. Why would you want to make it harder for
    people to read your Web page?
     
    Leif K-Brooks, Jan 15, 2005
    #2
    1. Advertising

  3. T.J.

    Spartanicus Guest

    "T.J." <> wrote:

    >How can I fix the font size for one
    >particular piece of text when
    >displayed in FireFox?


    Fix as in can't be changed? You can't, and you shouldn't attempt to in
    any browser.

    --
    Spartanicus
     
    Spartanicus, Jan 15, 2005
    #3
  4. On Sat, 15 Jan 2005 17:47:32 -0000, T.J. <> wrote:

    > How can I fix the font size for one
    > particular piece of text


    Why would you want to do that?

    > when
    > displayed in FireFox?


    Why especially for FireFox?

    It is usually best to provide a relative font for all your text. If _you_
    experience a certain part of your content to have a too large font-size in
    FireFox, change the size in _your_ browser settings.


    --
    ,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
    | weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
    | webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
    |zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
    `-------------------------------------------------- --<--@ ------------'
     
    Barbara de Zoete, Jan 15, 2005
    #4
  5. T.J.

    T.J. Guest

    "Barbara de Zoete" <> wrote in message
    news:eek:psknowrbmx5vgts@zoete_b...
    > On Sat, 15 Jan 2005 17:47:32 -0000, T.J. <> wrote:
    >
    >> How can I fix the font size for one
    >> particular piece of text

    >
    > Why would you want to do that?


    Because I want a very prominant header, so are using 40px
    as my <h1> tag whilst all other font is relative.
    if the header gets any bigger than 40px it starts effecting the
    layout.

    >> when
    >> displayed in FireFox?

    >
    > Why especially for FireFox?


    That was the only one I had tested it on at the time, I now see
    Netscape does the same thing.

    > It is usually best to provide a relative font for all your text. If _you_
    > experience a certain part of your content to have a too large font-size in
    > FireFox, change the size in _your_ browser settings.
    >


    The key word being "usually" are there never exceptions to the rule?
    All other text on the page is relative.
    This is the page if interested,
    http://www.sim64.co.uk/ordering-roses-online.html
    Ideally I want the text of the main header all on one line, and not
    cause the page to expand.
    In IE with the font fixed it displays as planned, but because the text
    size changes with Firefox and Netscape it causes the second line of
    text to drop.
    Is there a correct way of doing this, I could make the text a graphic,
    or
    should I just except that this happens?
     
    T.J., Jan 15, 2005
    #5
  6. T.J.

    Duende Guest

    While sitting in a puddle T.J. scribbled in the mud:

    >>> How can I fix the font size for one
    >>> particular piece of text

    >>
    >> Why would you want to do that?

    >
    > Because I want a very prominant header, so are using 40px
    > as my <h1> tag whilst all other font is relative.
    > if the header gets any bigger than 40px it starts effecting the
    > layout.


    make it an image

    --
    D?
    http://wipkip.biz just to raise my PR
     
    Duende, Jan 15, 2005
    #6
  7. On Sat, 15 Jan 2005 18:53:29 -0000, T.J. <> wrote:

    > "Barbara de Zoete" <> wrote in message
    > news:eek:psknowrbmx5vgts@zoete_b...
    >> On Sat, 15 Jan 2005 17:47:32 -0000, T.J. <> wrote:
    >>
    >> Why especially for FireFox?

    >
    > That was the only one I had tested it on at the time, I now see
    > Netscape does the same thing.
    >
    >> It is usually best to provide a relative font for all your text. If _you_
    >> experience a certain part of your content to have a too large font-size in
    >> FireFox, change the size in _your_ browser settings.
    >>

    >
    > The key word being "usually" are there never exceptions to the rule?


    Yes, there can be.

    > All other text on the page is relative.
    > This is the page if interested,
    > http://www.sim64.co.uk/ordering-roses-online.html
    > Ideally I want the text of the main header all on one line, and not
    > cause the page to expand.
    > In IE with the font fixed it displays as planned, but because the text
    > size changes with Firefox and Netscape it causes the second line of
    > text to drop.


    You just explained one. If you want to prevent wrapping of the header in _all_
    situations, I would use an image. If it shouldn't wrap in relatively common
    browsing situations, but you don't care for viewports under a certain width (say
    760px), I would use the child selector to specify a font-size especially for
    browsers other than IE. IE doesn't understand the child selector properly and
    ignores rules set with them (for example):

    h1 {
    font-size:40px; }

    body>h1 {
    font-size:36px; }


    --
    ,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
    | weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
    | webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
    |zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
    `-------------------------------------------------- --<--@ ------------'
     
    Barbara de Zoete, Jan 15, 2005
    #7
  8. T.J.

    Mitja Guest

    On Sat, 15 Jan 2005 18:53:29 -0000, T.J. <> wrote:

    >
    >>> How can I fix the font size for one
    >>> particular piece of text

    > Because I want a very prominant header, so are using 40px
    > as my <h1> tag whilst all other font is relative.
    > if the header gets any bigger than 40px it starts effecting the
    > layout.


    To fix the font size, your only option are images. NOT recommended.

    The other, better and more obvious way is to fix (as in mend, not make
    unresizable) the layout itself.
    [looks at html code]
    Hmmmm, seems alright. In what way does the layout break? You mentioned
    "dropping" lines - do you mean wrapping or disappearing? If it's
    disappearing, I haven't looked good enough. If it's merely wrapping, don't
    worry, live with it :) Wrapping is still better than disappearing off the
    right edge due to not wrapping. Web design can never be all that exact and
    retain proper flexibility at the same time.
    Just in case you're interested - in Opera it wraps in two lines with my
    default settings, as it does in Firefox. There are other things that do
    need fixing, though. Try maxing the text smaller and see what happens
    (hint: "clear: left").


    --
    Mitja
     
    Mitja, Jan 15, 2005
    #8
  9. T.J.

    T.J. Guest

    "Barbara de Zoete" <> wrote in message
    news:eek:psknq92jjx5vgts@zoete_b...
    > On Sat, 15 Jan 2005 18:53:29 -0000, T.J. <> wrote:
    >
    >> "Barbara de Zoete" <> wrote in message
    >> news:eek:psknowrbmx5vgts@zoete_b...
    >>> On Sat, 15 Jan 2005 17:47:32 -0000, T.J. <> wrote:
    >>>
    >>> Why especially for FireFox?

    >>
    >> That was the only one I had tested it on at the time, I now see
    >> Netscape does the same thing.
    >>
    >>> It is usually best to provide a relative font for all your text. If
    >>> _you_
    >>> experience a certain part of your content to have a too large font-size
    >>> in
    >>> FireFox, change the size in _your_ browser settings.
    >>>

    >>
    >> The key word being "usually" are there never exceptions to the rule?

    >
    > Yes, there can be.
    >
    >> All other text on the page is relative.
    >> This is the page if interested,
    >> http://www.sim64.co.uk/ordering-roses-online.html
    >> Ideally I want the text of the main header all on one line, and not
    >> cause the page to expand.
    >> In IE with the font fixed it displays as planned, but because the
    >> text
    >> size changes with Firefox and Netscape it causes the second line of
    >> text to drop.

    >
    > You just explained one. If you want to prevent wrapping of the header in
    > _all_ situations, I would use an image. If it shouldn't wrap in
    > relatively common browsing situations, but you don't care for viewports
    > under a certain width (say 760px), I would use the child selector to
    > specify a font-size especially for browsers other than IE. IE doesn't
    > understand the child selector properly and ignores rules set with them
    > (for example):
    >
    > h1 {
    > font-size:40px; }
    >
    > body>h1 {
    > font-size:36px; }
    >


    Thanks,
    But I like to make my pages at least Bobby 508 approved
    if I put h1 {font-size:36px; } in the body, Bobby will call it as
    an error. Or have I read your reply wrong?
    Is creating an image the only other answer. I thought this was
    always frowned upon too?
    Or is it a case of the lesser of the two evils.
    Alternatively should I just except that it will wrap?
     
    T.J., Jan 15, 2005
    #9
  10. T.J.

    Richard Guest

    "Duende" <> wrote in message
    news:Xns95DF705C21DD7httpwipkipbiz@130.133.1.4...
    > While sitting in a puddle T.J. scribbled in the mud:
    >
    > >>> How can I fix the font size for one
    > >>> particular piece of text
    > >>
    > >> Why would you want to do that?

    > >
    > > Because I want a very prominant header, so are using 40px
    > > as my <h1> tag whilst all other font is relative.
    > > if the header gets any bigger than 40px it starts effecting the
    > > layout.

    >
    > make it an image
    >


    The king of one liners strikes again.
    Are you sure you aren't related to "meat --> plow"?
    I have a hunch you are him.
     
    Richard, Jan 15, 2005
    #10
  11. T.J.

    T.J. Guest

    "Mitja" <> wrote in message
    news:eek:psknrwhkzdob4us@localhost...
    > On Sat, 15 Jan 2005 18:53:29 -0000, T.J. <> wrote:
    >
    >>
    >>>> How can I fix the font size for one
    >>>> particular piece of text

    >> Because I want a very prominant header, so are using 40px
    >> as my <h1> tag whilst all other font is relative.
    >> if the header gets any bigger than 40px it starts effecting the
    >> layout.

    >
    > To fix the font size, your only option are images. NOT recommended.
    >
    > The other, better and more obvious way is to fix (as in mend, not make
    > unresizable) the layout itself.
    > [looks at html code]
    > Hmmmm, seems alright. In what way does the layout break? You mentioned
    > "dropping" lines - do you mean wrapping or disappearing? If it's
    > disappearing, I haven't looked good enough. If it's merely wrapping, don't
    > worry, live with it :) Wrapping is still better than disappearing off the
    > right edge due to not wrapping. Web design can never be all that exact and
    > retain proper flexibility at the same time.
    > Just in case you're interested - in Opera it wraps in two lines with my
    > default settings, as it does in Firefox. There are other things that do
    > need fixing, though. Try maxing the text smaller and see what happens
    > (hint: "clear: left").
    >


    Thanks,
    Yes, what I meant was wrapping.
    Ideally I want it all on the same line, but once the text
    expands it has no choice but to wrap or expand the page,
    I've stopped it from expanding the page, so therefore it
    wraps.
    Is my only alternative to just put up with it or use an image?
    Shrinking the text was going to be my next question ;o)
    How can I stop that causing problems with the other image
    dropping into the lower cell?
     
    T.J., Jan 15, 2005
    #11
  12. While the city slept, T.J. () feverishly typed...

    > Is creating an image the only other answer. I thought this was
    > always frowned upon too?


    If you really want to present the text exactly as it is, then try the
    following;

    <h1><img src="banner.jpg" alt="Ordering Roses Online"></h1>

    .... or accept that it will wrap under some circumstances.

    Cheers,
    Nige
    --
    Nigel Moss
    http://www.nigenet.org.uk
    Mail address not valid. , take the DOG. out!
    In the land of the blind, the one-eyed man is very, very busy!
     
    nice.guy.nige, Jan 15, 2005
    #12
  13. On Sat, 15 Jan 2005 19:28:53 -0000, T.J. <> wrote:

    >
    > "Barbara de Zoete" <> wrote in message
    > news:eek:psknq92jjx5vgts@zoete_b...
    >> On Sat, 15 Jan 2005 18:53:29 -0000, T.J. <> wrote:
    >>


    [ problems with header of 40px wrapping in FireFox, unwanted ]

    >> You just explained one. If you want to prevent wrapping of the header in
    >> _all_ situations, I would use an image. If it shouldn't wrap in
    >> relatively common browsing situations, but you don't care for viewports
    >> under a certain width (say 760px), I would use the child selector to
    >> specify a font-size especially for browsers other than IE. IE doesn't
    >> understand the child selector properly and ignores rules set with them
    >> (for example):
    >>
    >> h1 {
    >> font-size:40px; }
    >>
    >> body>h1 {
    >> font-size:36px; }
    >>

    >
    > Thanks,
    > But I like to make my pages at least Bobby 508 approved
    > if I put h1 {font-size:36px; } in the body, Bobby will call it as
    > an error. Or have I read your reply wrong?


    Well, maybe. Maybe I wasn't clear enough. In any case we don't seem to be able
    to understand eachother with ease :)

    What I mean is that these above codes are put in your stylesheet. The h1 is a
    normal selector (element level). The body>h1 is a child selector. The styles
    described will only apply to the h1 being the direct descendent, the child of
    the body. So:

    <html>
    <head>
    <style type="text/css">
    h1 { font-size:40px; }
    body>h1 {font-size:36px; }
    </style>
    </head>
    <body>
    <h1>Your header here</h1>

    <p>This above header will have 40px font-size in IE
    and 36px font-size in all other mainstream, modern,
    graphical browsers.</p>
    </body>
    </html>

    This is about as clear as I can be. ;-)

    [image versus fixed font-size]

    As a rule of thumb I would stick to flexible design, in this case meaning a
    fixed font-size for the header (if large enough), so the text in some browsing
    situation will wrap. Always preferable over an image only showing partially, for
    than the contents of the page header might get lost. That I would regard highly
    undesirable.

    But, it is your descission. Just think it through and be consistant with the
    implementation of the technique you choose throughout your site.

    --
    ,-- --<--@ -- PretLetters: 'woest wyf', met vele interesses: ----------.
    | weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
    | webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
    |zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
    `-------------------------------------------------- --<--@ ------------'
     
    Barbara de Zoete, Jan 15, 2005
    #13
  14. T.J.

    T.J. Guest

    "Barbara de Zoete" <> wrote in message
    news:eek:psknszyvmx5vgts@zoete_b...
    > On Sat, 15 Jan 2005 19:28:53 -0000, T.J. <> wrote:
    >
    >>
    >> "Barbara de Zoete" <> wrote in message
    >> news:eek:psknq92jjx5vgts@zoete_b...
    >>> On Sat, 15 Jan 2005 18:53:29 -0000, T.J. <> wrote:
    >>>

    >
    > [ problems with header of 40px wrapping in FireFox, unwanted ]
    >
    >>> You just explained one. If you want to prevent wrapping of the header in
    >>> _all_ situations, I would use an image. If it shouldn't wrap in
    >>> relatively common browsing situations, but you don't care for viewports
    >>> under a certain width (say 760px), I would use the child selector to
    >>> specify a font-size especially for browsers other than IE. IE doesn't
    >>> understand the child selector properly and ignores rules set with them
    >>> (for example):
    >>>
    >>> h1 {
    >>> font-size:40px; }
    >>>
    >>> body>h1 {
    >>> font-size:36px; }
    >>>

    >>
    >> Thanks,
    >> But I like to make my pages at least Bobby 508 approved
    >> if I put h1 {font-size:36px; } in the body, Bobby will call it as
    >> an error. Or have I read your reply wrong?

    >
    > Well, maybe. Maybe I wasn't clear enough. In any case we don't seem to be
    > able to understand eachother with ease :)
    >
    > What I mean is that these above codes are put in your stylesheet. The h1
    > is a normal selector (element level). The body>h1 is a child selector.
    > The styles described will only apply to the h1 being the direct
    > descendent, the child of the body. So:
    >
    > <html>
    > <head>
    > <style type="text/css">
    > h1 { font-size:40px; }
    > body>h1 {font-size:36px; }
    > </style>
    > </head>
    > <body>
    > <h1>Your header here</h1>
    >
    > <p>This above header will have 40px font-size in IE
    > and 36px font-size in all other mainstream, modern,
    > graphical browsers.</p>
    > </body>
    > </html>
    >
    > This is about as clear as I can be. ;-)


    Thanks again,
    I think I've got it, but why 36px for other browsers?

    > [image versus fixed font-size]
    >
    > As a rule of thumb I would stick to flexible design, in this case meaning
    > a fixed font-size for the header (if large enough), so the text in some
    > browsing situation will wrap. Always preferable over an image only
    > showing partially, for than the contents of the page header might get
    > lost. That I would regard highly undesirable.
    >
    > But, it is your descission. Just think it through and be consistant with
    > the implementation of the technique you choose throughout your site.
    >


    Looks like the best thing is to live with it and let it wrap, it doesn't
    mess the
    layout up to much.
     
    T.J., Jan 15, 2005
    #14
  15. T.J.

    kchayka Guest

    Barbara de Zoete wrote:
    >
    > If you want to prevent wrapping of the header in _all_
    > situations, I would use an image.


    Why not white-space:nowrap?

    --
    Reply email address is a bottomless spam bucket.
    Please reply to the group so everyone can share.
     
    kchayka, Jan 15, 2005
    #15
  16. T.J.

    n|ck Guest

    T.J. wrote:
    > This is the page if interested,
    > http://www.sim64.co.uk/ordering-roses-online.html
    > Ideally I want the text of the main header all on one line, and not
    > cause the page to expand.


    The div that contains your <h1> only has a width of 390px - If you increase
    that, it should take longer for the <h1> to wrap.
     
    n|ck, Jan 16, 2005
    #16
  17. T.J.

    Neal Guest

    T.J. <> wrote:

    > Hi,
    > How can I fix the font size for one
    > particular piece of text when
    > displayed in FireFox?


    It is absolutely stupid to want to. It goes against every benefit the
    WWW has going for it.

    Now go. Go far away.
     
    Neal, Jan 16, 2005
    #17
  18. T.J.

    T.J. Guest

    "Neal" <> wrote in message
    news:eek:...
    > T.J. <> wrote:
    >
    >> Hi,
    >> How can I fix the font size for one
    >> particular piece of text when
    >> displayed in FireFox?

    >
    > It is absolutely stupid to want to. It goes against every benefit the WWW
    > has going for it.
    >
    > Now go. Go far away.


    Have you read the thread?
     
    T.J., Jan 16, 2005
    #18
  19. T.J.

    T.J. Guest

    "n|ck" <> wrote in message
    news:dejGd.120184$...
    > T.J. wrote:
    >> This is the page if interested,
    >> http://www.sim64.co.uk/ordering-roses-online.html
    >> Ideally I want the text of the main header all on one line, and not
    >> cause the page to expand.

    >
    > The div that contains your <h1> only has a width of 390px - If you
    > increase that, it should take longer for the <h1> to wrap.


    I'm trying to get the width down to 630
     
    T.J., Jan 16, 2005
    #19
  20. "T.J." <> wrote:

    > Because I want a very prominant header, so are using 40px
    > as my <h1> tag whilst all other font is relative.


    This means that the heading font size can be smaller than that of copy
    text, or grotesquely much larger.

    Your wanting "very prominent header" should cause no exception to the
    principle of using relative font size. Prominence is always relative to the
    environment.

    > if the header gets any bigger than 40px it starts effecting the
    > layout.


    Then the layout is broken by design. Redesign it so that it adapts to
    different font sizes.

    > Ideally I want the text of the main header all on one line, and not
    > cause the page to expand.
    > In IE with the font fixed it displays as planned,


    Pardon? On my IE, "Ordering Roses" appears on one line, "Online" on
    another, and I tried differenr window widths. It isn't bad really, but if
    you want to prevent line wrapping, maybe you should remove something that
    you've done to cause it.

    P.S. When taking a look at your source code, I noticed that the first image
    is a link to the page itself - not a good idea. Moreover, you have <html
    lang="eng"> which is incorrect - by HTML rules, two-letter language codes
    are to be used languages that have them. You might have used A-Prompt,
    which incorrectly generates three-letter codes.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Pages about Web authoring: http://www.cs.tut.fi/~jkorpela/www.html
     
    Jukka K. Korpela, Jan 16, 2005
    #20
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Andreas Klemt
    Replies:
    6
    Views:
    11,124
    Peter Theill
    Nov 28, 2004
  2. dave richards
    Replies:
    2
    Views:
    619
    Paul Furman
    Feb 19, 2004
  3. Wongod
    Replies:
    2
    Views:
    718
  4. wial
    Replies:
    2
    Views:
    830
  5. mttc
    Replies:
    2
    Views:
    2,415
    Roedy Green
    Jul 3, 2009
Loading...

Share This Page