Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Fixing font size in FireFox?

Reply
Thread Tools

Fixing font size in FireFox?

 
 
T.J.
Guest
Posts: n/a
 
      01-15-2005

"Mitja" <(E-Mail Removed)> wrote in message
newspsknrwhkzdob4us@localhost...
> On Sat, 15 Jan 2005 18:53:29 -0000, T.J. <(E-Mail Removed)> 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?


 
Reply With Quote
 
 
 
 
nice.guy.nige
Guest
Posts: n/a
 
      01-15-2005
While the city slept, T.J. ((E-Mail Removed)) 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. http://www.velocityreviews.com/forums/(E-Mail Removed), take the DOG. out!
In the land of the blind, the one-eyed man is very, very busy!


 
Reply With Quote
 
 
 
 
Barbara de Zoete
Guest
Posts: n/a
 
      01-15-2005
On Sat, 15 Jan 2005 19:28:53 -0000, T.J. <(E-Mail Removed)> wrote:

>
> "Barbara de Zoete" <(E-Mail Removed)> wrote in message
> newspsknq92jjx5vgts@zoete_b...
>> On Sat, 15 Jan 2005 18:53:29 -0000, T.J. <(E-Mail Removed)> 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 |
`-------------------------------------------------- --<--@ ------------'
 
Reply With Quote
 
T.J.
Guest
Posts: n/a
 
      01-15-2005

"Barbara de Zoete" <(E-Mail Removed)> wrote in message
newspsknszyvmx5vgts@zoete_b...
> On Sat, 15 Jan 2005 19:28:53 -0000, T.J. <(E-Mail Removed)> wrote:
>
>>
>> "Barbara de Zoete" <(E-Mail Removed)> wrote in message
>> newspsknq92jjx5vgts@zoete_b...
>>> On Sat, 15 Jan 2005 18:53:29 -0000, T.J. <(E-Mail Removed)> 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.


 
Reply With Quote
 
kchayka
Guest
Posts: n/a
 
      01-15-2005
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.
 
Reply With Quote
 
n|ck
Guest
Posts: n/a
 
      01-16-2005
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.
 
Reply With Quote
 
Neal
Guest
Posts: n/a
 
      01-16-2005
T.J. <(E-Mail Removed)> 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.
 
Reply With Quote
 
T.J.
Guest
Posts: n/a
 
      01-16-2005

"Neal" <(E-Mail Removed)> wrote in message
news(E-Mail Removed)...
> T.J. <(E-Mail Removed)> 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?


 
Reply With Quote
 
T.J.
Guest
Posts: n/a
 
      01-16-2005

"n|ck" <(E-Mail Removed)> wrote in message
news:dejGd.120184$(E-Mail Removed)...
> 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


 
Reply With Quote
 
Jukka K. Korpela
Guest
Posts: n/a
 
      01-16-2005
"T.J." <(E-Mail Removed)> 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


 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
creating font with fixed font size andreasbell Software 1 08-30-2010 09:39 PM
Swing Font, it's Java Font? ot native? how install new font? mttc Java 2 07-03-2009 07:29 PM
Printing with specific font-type and font-size wial Java 2 11-27-2008 05:30 PM
Windows XP explorer font and font size Lookout Computer Support 0 06-04-2006 02:58 AM
Selecting font size based on available font dave richards HTML 2 02-19-2004 02:47 PM



Advertisments