A definative CSS Font Sizing

In looking for a clear, definative way to size fonts on a web page I have come accross hundreds of different methods to set up or start sizing fonts on a page....

In the past I have always set the body in the css to a percentage and then used 'em' values to change styles that are different from the normal page text size.

Recently we have had to do a site with a strict 'doctype' and my previous methods no longer seem to be effective as no matter what I set the body % to be the sizing doesnt change.

Put simply:

body {
font-size: 70%;
font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
color: #345A03;
margin:0;
padding:0;
}
h1 {
font-size: 1.4em;
color: #7EA626;
font-weight: bold;
}
#smallerText {
font-size: 0.9em;
}
.......

What should I be doing? Thanks.

not wuite sure what you mean, but you can use em's for sizes of divs aswell, as they then change size with the font

I think it's just a doctype problem, I have looked on various css sites since and changed mine and the fonts act differently depending on the doctype whilst still using the css posted previously.

I was looking for a definative style sheet set up that I should use in future.

I need to do some more research about the doctype I think and which ones to specify on my pages.

As well as the doctype, you need to look at the charset you are specifying as there may be an interaction there and also look at how your pages are being served up by the server, as html or xhtml.

Th basic principle use were using for font sizing was fine although I would set the body percentage higher so that it closely reflects any base font size that the user has set.

You can find some info on this in the css sticky at the top of the forum.