Fixing font size in FireFox?

W

WindAndWaves

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

There are also classier, nicer and more stimulating ways to draw attention
to a header or a note.

Some of these are:

Italics
bold
creating space around the header (this may work very well)
font colour
underline
background color
position on the page
etc....

any page with font-size 36-40px will look bulky - most of the time.

so dont forget about your alternatives, especially by creating lots of space
around your heading you will give it instant attention and you will make it
more appealing than a cheap newspaper style.

- Nicolaas
 
B

Barbara de Zoete

Why not white-space:nowrap?

:-D Maybe because it is too easy to do it that way?

My mind obviously got caught on one track. Thanks for the diversion.


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

Barbara de Zoete

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

<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>
I think I've got it, but why 36px for other browsers?

That's just an example value. You said the 40px was too big for browsers other
than IE, so I took some smaller value. Adjust as needed.
[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.

<What's with the indented text? It messes up the reply, unless I correct it
manually. />

Read carefully through some of the advise given in all other posts. I used to
have a fixed size for the fonts of my page header. Now I have a relative font.
The header fits the design of a page because it has a visual context. If all
fonts can be enlarged (or made smaller) but the header font remains the same
size, your carefully chosen proportional design gets lost.

Also remember that communicating your message is imo always the important bit.
The looks come second, but at some distance. Others may think differently though.
A visitor will usually visit your site with only one browser (type) ever and
will therefore never notice a possible difference in visual rendering between
various browsers. So, if a page communicates its contents clearly and it looks
good (enough), although different from the looks in an other browser, your work
as a designer is more or less done.


--
,-- --<--@ -- 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

Toby Inkster

T.J. said:
Ideally I want the text of the main header all on one line, and not
cause the page to expand.

Replace this:

<h1>Ordering Roses Online</h1>

with this:

<h1>Ordering&nbsp;Roses&nbsp;Online</h1>

Easy.
 
T

T.J.

WindAndWaves said:
There are also classier, nicer and more stimulating ways to draw attention
to a header or a note.

Some of these are:

Italics
bold
creating space around the header (this may work very well)
font colour
underline
background color
position on the page
etc....

any page with font-size 36-40px will look bulky - most of the time.

so dont forget about your alternatives, especially by creating lots of
space
around your heading you will give it instant attention and you will make
it
more appealing than a cheap newspaper style.

- Nicolaas
Thank you, and everyone else who has replied.
The main problem is I don't really know what I am doing
and learning as I go along.
My main problem is I am using the size of some divs to
compensate for the fact IE doesn't support min-width
Also I am using the size of the main header to control the
size of that cell.
If the header is to small, the image to the left drops down in to the
next cell,
My main problem is the min-width though, what is the best way to
overcome this for IE?
Ideally I want the line of links in the red panel to expand across the
page when using bigger text on a wider resolution, but to wrap at
about 640px. If IE. supported min-width this wouldn't be a problem.
Any tips on how to do this would be appreciated.

page at,
http://www.sim64.co.uk/ordering-roses-online.html
other comments on page appreciated,
(not all links are pointing to the right places yet, and
alt attributes need altering)
 
T

T.J.

Toby Inkster said:
Replace this:

<h1>Ordering Roses Online</h1>

with this:

<h1>Ordering&nbsp;Roses&nbsp;Online</h1>

Easy.
I thought using &nbsp; was frowned upon?
Also, will this have any effect on search engines?
 
N

neredbojias

Without quill or qualm, Richard quothed:
The king of one liners strikes again.
Are you sure you aren't related to "meat --> plow"?
I have a hunch you are him.

No, but I've heard of him referred to as "meat ball"...
 
T

Toby Inkster

T.J. said:
I thought using &nbsp; was frowned upon?

Well " " is probably better in some situations, but if you're not
using XHTML "&nbsp;" should be fine.
 
T

Travis Newbury

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

In this case isn't an image a perfect solution? The OP wants a header
to be the same everywhere. An image is the only solution, that will work
everywhere.
 
T

Travis Newbury

T.J. said:
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?

Using an image for text is frowned upon. Using an image as a header is
perfectly acceptable. Remember to use alt text that's all.
 
T

Toby Inkster

Travis said:
In this case isn't an image a perfect solution? The OP wants a header
to be the same everywhere. An image is the only solution, that will work
everywhere.

Except in browsers with images disabled/unavailable.
 
M

Mitja

In this case isn't an image a perfect solution? The OP wants a header
to be the same everywhere. An image is the only solution, that will work
everywhere.

My answer might have been too conservative; I was thinking more along the
lines of many different headers, which then have to be converted to
images, and that
1) is a nuisance to do
2) means heavier server load (just a few days ago I saw stats for a page
where graphical headers represent more than 30% of all traffic :))
3) theoretically could confuse search engines and blind users, though I
doubt it does if done properly (<h1><img ... alt="my title"></h1>)
 
M

Mitja

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.
Um... I'm almost sure width:100% is what you've tried, but I can't
remember why that doesn't work. Care to refresh my memory? (No sarcasm
here, just too lazy to edit your css :))
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?
A quick solution: add <div style="clear:both"></div> at the bottom of your
div.toppanel2.
There's more to it, see google results for clearing floats.
 
D

Duende

While sitting in a puddle neredbojias scribbled in the mud:
Without quill or qualm, Richard quothed:


No, but I've heard of him referred to as "meat ball"...
You sure take long naps.
 
T

Travis Newbury

Mitja said:
My answer might have been too conservative; I was thinking more along
the lines of many different headers, which then have to be converted
to images, and that
1) is a nuisance to do

So what you want a solution that doesn't take any effort.
2) means heavier server load (just a few days ago I saw stats for a
page where graphical headers represent more than 30% of all traffic :))

The graphical header is question is negligible except in extreme cases.
3) theoretically could confuse search engines and blind users, though I
doubt it does if done properly (<h1><img ... alt="my title"></h1>)

That's what alt text is for

Do what you want. But if you want the same look on as many browsers as
possible the only choice is an image.
 
N

Noozer

Quick answer is... Don't do it.

Do not fix your font sizes. If your layout depends on a specific font size
then the layout is broken.

The main reason I use Firefox is to make the many broken websites out there
readable.
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,902
Latest member
Elena68X5

Latest Threads

Top