Fixing font size in FireFox?

[T.J.]

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

 

[Leif K-Brooks]

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?

 

[Spartanicus]

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.

 

[Barbara de Zoete]

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 |
`-------------------------------------------------- --<--@ ------------'

 

[T.J.]

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.

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?

 

[Duende]

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

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

 

[Barbara de Zoete]

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


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 |
`-------------------------------------------------- --<--@ ------------'

 

[Mitja]

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").

 

[T.J.]

Yes, there can be.


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?

 

[Richard]

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


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.

 

[T.J.]

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?

 

[nice.guy.nige]

While the city slept, T.J. ([email protected]) 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

 

[Barbara de Zoete]

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

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 |
`-------------------------------------------------- --<--@ ------------'

 

[T.J.]

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

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.

 

[kchayka]

If you want to prevent wrapping of the header in _all_
situations, I would use an image.

Why not white-space:nowrap?

 

[n|ck]

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.

 

[Neal]

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.

 

[T.J.]

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.]

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

 

[Jukka K. Korpela]

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.