Welcome to WebmasterWorld Guest from 54.166.46.226

Forum Moderators: not2easy

Message Too Old, No Replies

Firefox and CSS? how to set font size?

   
4:43 am on Aug 13, 2006 (gmt 0)



i have a website that works perfectly in IE6 that uses css to set solid the font sizes and you cannot change these fint sizes in the text size setting. but in firefox it ignores the font size settings and users can change the font size in the text size settings. this is annoying as i have people with larger default font size settings and it totally stuffs up my site.
how do i tell firefox, using css, to set the browser font size to the size i specify and not to allow changes to the size like in IE6?
6:34 am on Aug 13, 2006 (gmt 0)

10+ Year Member



One thing you can do first is set an overall font size for your site by defining a base font size in the body tag of your css file. Then at least the base size will be the same.

Because of browser weirdness 100% is sometimes interpreted differently by different browsers, so in your style sheet use:

body {font-size:100.01%;}

Then you can define your font sizes for your page, if you want to define all your <p> tags as a fixed size:
p {font-size:11px;}

Though I'm not a big fan of fixed pixel sizes, there are so many different people, eyes over 40, eyes under 40, monitor sizes, browsers... I like to build in some flexibility. I like to use em's. They are based on 1.0em = 100%

So for a roughly 11pt font I'd define the <p> tag:
p {font-size:0.76em;}

it's smallish, but scalable.

The really important thing here is to define the base size in the css body, that way you get rid of some unpredictable cross-browser base sizes.

Some people have also noticed weirdness with a doctype of html 4.0 transitional vs. xhtml 1.0 transitional, the xhtml being more consistent.

1:41 pm on Aug 13, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



According to the standards, font sizes are supposed to be relative to a size set by the user in their browser. A browser that allows you to override user preferences (as is the case with IE and pixel based font sizes) is broken. You will need to fix your layout, so that it can adapt to different font sizes.
10:10 pm on Aug 13, 2006 (gmt 0)

5+ Year Member



I'm sorry if I'm saying something dumb in m,y first post here, but I don't understand what's wrong with using pixels as the size spec? So far, I've seen consistent agreement between browsers, but some disagreement when using points. Am I missing something? Please advise, thanks.
3:11 pm on Aug 14, 2006 (gmt 0)

10+ Year Member



Some people have larger font sizes set as default due to bad vision, large monitors, high screen resolutions etc. Internet Explorer for Windows will not resize the text if pixels have been used as the font size unit, which will - for some users - render the site as completely useless.

Use the unit em for font sizes instead.

5:51 pm on Aug 14, 2006 (gmt 0)

WebmasterWorld Senior Member fotiman is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month




I'm sorry if I'm saying something dumb in m,y first post here, but I don't understand what's wrong with using pixels as the size spec? So far, I've seen consistent agreement between browsers, but some disagreement when using points. Am I missing something? Please advise, thanks.

What's wrong with using pixels as the font size is that Internet Explorer does not allow the user to adjust the text size if it is defined in pixels. This is an accessibility problems because users with poor vision should be able to increase the font size in their browser settings accordingly. IE is broken in this sense.

Firefox is correct to allow users to increase the pixels size. If that breaks your page layout, it means you've done a poor job designing the page.

6:35 pm on Aug 14, 2006 (gmt 0)

10+ Year Member



Webpages are not print - you have no real control over how it finally appears.

Also, do you think you can take over MY browser, over-ride MY preferences to make the page the way YOU want it rather than how I want it and keep my custom?

I think I'd discover very quickly that your competitor is a click away, wouldn't you?

zoo