Hi,

 

I've been asked by a colleague the following and to be honest I'm not 100% sure of the best answer. One of those things were there are lots of different questions:

 

Q " I was getting frustrated with the font size of my page as it was appearing a bit bigger than I wanted it to and wouldn't get any smaller even though I kept changing the size in the code. I found that it's actually my browser settings that control the size of the text so now what do I do about setting the font size as I want the text to nicely fill the page and not change according to each individuals browser settings as I have a fixed page size. Now I'm worried about text spilling out of the page size or not filling the page in different peoples browsers, is there any way I can set it to a constant no matter what people's browser settings are?"

 

Now I'm gonna tell her to sign up to this forum.

 

Thanks.

This might help http://www.clagnut.com/blog/348/ ?

Q " I was getting frustrated with the font size of my page as it was appearing a bit bigger than I wanted it to and wouldn't get any smaller even though I kept changing the size in the code. I found that it's actually my browser settings that control the size of the text so now what do I do about setting the font size as I want the text to nicely fill the page and not change according to each individuals browser settings as I have a fixed page size. Now I'm worried about text spilling out of the page size or not filling the page in different peoples browsers, is there any way I can set it to a constant no matter what people's browser settings are?"

 

Well, the font-size doesn't need to be related to the browser setting, you can specify your own font-size. You can't size the font to suit a window size or screen resolution except by very complicated Ajax (javascript) but you can specify font-size in ems and then use ems for all sizes for all elements like divs, forms, images, margins, padding, borders, etc. and they will all resize in proportion if the viewer resizes text only.

 

It's true that the default font size for browsers is 16px so if you set the font-size for the body as font-size: 65%; it becomes 65% x 16px = 10px which makes calculation of other % em sizes easy. A viewer changing his text size will alter the 65% em result.

 

It used to be bad practice to fix the font-size in px as disabled people can't alter it in old versions of IE6, IE5.5 etc. although modern browsers like Firefox allow font-size in px to be increased or decreased and IE7 and IE8 and other modern browsers now have zoom. There shouldn't be a problem sizing font for the whole page in theh body as px to make it look good to you using normal browser settings and then letting viewers alter the font-size if they wish (but I agree that the text won't fit divs unless you you ems for everything).

Hi, I'm the colleague with the problem mentioned. What I'm confused about at the moment is that I have a left column of secondary navigation links on my page which are being controlled by this css (the font settings in #navbar2 control a title for the links):

 

#navbar2 {

position:relative;

padding-top:10px;

background-image:url(media/FSC-Logo.jpg);

background-repeat:no-repeat;

background-position:bottom center;

float:left;

width:156px;

height:480px;

font-family:Arial;

font-size:16px;

font-weight:bold;

color:#0066CC; }

a.nav2:link {

font-family:arial;

font-weight:normal;

font-size:15px;

text-decoration:none;

color:#666666 }

a.nav2:hover {

font-family:arial;

font-size:15px;

font-weight:normal;

text-decoration:none;

color:#0066CC }

#links {

position:absolute;

top:35px;

line-height:26px; }

 

None of this text (title or links) changes when the browser settings are changed.

 

Then I have the main body text of the page which is being controlled by this css:

 

p.main {

font-family:arial, sans-serif;

font-sixe:12px;

color:#000000;

font-weight:normal;

line-height:20px }

p.header {

font-family:arial, sans-serif;

font-size:14px;

font-weight:bold;

color:#0066CC;

line-height:14px }

 

But this text IS controlled by the browser settings, although the headers do stay larger than the main text it all increases in size if you increase the browser font size setting. My question is really why do the browser settings control one but not the other?

 

Thanks.

They should all change when a browser text size is changed (except in IE 6 and earlier versions) if the styles are all in the same css file or head section style tags. Make sure both groups of styles are operating and not dead for some reason.

 

A small typo font-sixe:12px; should be font-size:12px; but that won't affect the issue.

 

You should be able to cut out some of the repetition.