relative font sizes and css

One of the differences of HTML and CSS is that HTML has defaults, were as CSS doesn't, as it's more of an add-on thing.

So HTML's default font size is 3 and your trying to do a +2 with CSS but not stating from what to base it off.
try use font-size:14pt (or px, em etc)
the '14' in this case means start from zero
And also remember the font style (type) affects the size of the displayed text, more so with CSS than HTML.

I agree with Busy. You must give the +2em's or whatever a base to build upon (or, multiply itself from). I think your base is the size you state for the main body text in the "body {font-size: 14px;}" tag. When you do this, then type something like "h1 {font-size: 2em;}", your h1 size becomes 2 x 14, or 28px.

Btw, I have read that em's can cause problems for certain browsers, and these problems are taken care of (at least, for the most part) by using pixel (px) sizes instead. The tag "pt" (point) seems to be best used when sizing a page for printing.

Here's the link to a 6-page article about using pixels or nothing at all to declare font sizes (at least until all the browsers use CSS the way it's intended to be used): CLICK HERE

I just happened to come across this article by accident when I typed "pixel font sizes" in my search box a couple of weeks or so ago, LoL.

IMO, your best bet would be to use percentage font sizes e.g.
p {
font-size:100%;
}
or to use point (pt) sizes, although this is more for print (friendly) pages, e.g.
p {
font-size:12pt;
}

em is also another relative font-size you might to use, but I recommend going with the percentage one

FYI, the pixel argument is years old and for the most part no longer applicable. em is a more solid option.

Also, do NOT use pts except in your print stylesheet!

Percentages have been reported to be not as well supported as em.

Keywords are probably the safest, from all reports, but I find them difficult to get right.

According to the above mentioned article:

"Netscape 4 for Mac renders percentage units when they are used for line-height (leading) but ignores them entirely when they are used to specify type sizes. And some versions of Netscape 4 for Windows treat percentages as pixels. (Thus, 200% is dementedly translated as 200 pixels) . . .

Lest we forget, good old IE3 drops the ball by sizing percentages relative to the user's default font size, rather than to the parent element. In English: if the web user has set her browser's default to 10px, IE3 will display STRONG at 20px. Not the 24px you intended (with STRONG {font-size: 2em;} and BODY {font-size: 12px;} originally). If her browser defaults to 16px, STRONG will be 32px tall (not 24px)."

Of course, one hopes that the newer IE and Netscape browser versions have fixed these potential problems.

fiesty, The people who use IE3, and N4/Mac are approximately 0.5% COMBINED with all other earlier versions of those two browsers AND IE4.

Re: N4 and %, that's why ems are preferred over %.

One doesn't need to hope, one needs to be educated about what one does for money.

As I said, the things in that article held true YEARS ago, they do not hold true today.

Yeah, I noticed the article was from the year 2000.

Actually, though, I'm not sure why one would bother with em's or % because one must have some idea beforehand about what size he/she wants the h1's, h2's, b's, etc., relative to the main-body font size (i.e., if I know my main-body font size is 14px, knowing what code I've put in, and I want the h1's to be twice as big, I know to put 28px).

If we are not concerned with cross-compatibility, then why do we bother with CSS at all? Perhaps that 0.5% (however many thousands of people that might be) feel they should be able to view a site the way it was intended to be viewed?

I disagree about one not needing to hope. One ALWAYS needs hope, otherwise there is hopelessness.

Plus, people can and do make money doing things they are not thoroughly educated about. For example, upper management, though they should know better, decides to change the decor of a large department store in order to increase sales, yet this fails miserably because the store's decor wasn't the problem . . . quality, lack of product appeal, high pricing, and poor service were the problems.

Another possible example: a web designer builds a really nice site with excellent graphics/navigation, an excellent product, and the "works" (anything you could imagine a visitor wanting from this site), yet he/she launches the site with over 50 misspelled words and even more punctuation/grammar errors. YET, people still overlook this, come to the site, and buy the product time and time again. Apparently the designer, though fairly educated at web design, was not as educated in spelling and/or grammar usage.

ah, yes, let's throw out education, who needs it? *sigh*

Let's be sure that 0.5%, if the CSS is done properly, does not get something identical to the vast majority, but rather gets something they can see. Again, that education comes into play here.

We're not saying ignore that 0.5%, we're saying do not cater to them. Catering to 0.5% and ignoring the needs of 99.5%, while idealistic, is financial suicide.

All sensible browsers allow the user to resize pixels. IE doesn't. Hence, using pixels punishes the majority browser.

If you're setting a percentage (h1 is 2x p) then for pete's sake what's the difference to you? Set p to 1em and h1 to 2em. Boom, done. No carrying digits to get the math right.

Of course, in real life it doesn't work that way, but it's still the same situation -- if you're using pixels, you are preventing resizing in IE only, so you might as well use em or keywords and get it accessible for everyone.

From that, I take it that IE is not a "sensible browser." So, perhaps it needs less catering to in order to become more sensible.

However, I've had no complaints from IE users who have viewed some of the stuff I've had that used pixels in the CSS.

Plus, I didn't say we didn't "need" education. I just suggested that some who are not so educated at what they do STILL make money at what they do.

Oh, I see, it's okay to make money without providing good service? See, my point was that it's shoddy work when you do that, and people should aspire to better work, not excuse crap.

I didn't say it was "okay" to make money without providing a good service (it's not "okay" to me), but it does happen like that every day. Anyone who's had bad experiences at car-repair shops knows that.

It seems that you are saying that it is not ever good to use pixels for IE, even if they're set to the right sizes (those that look the way they should in IE). Is that what you're saying?

I mean, I know you said IE doesn't allow the user to resize pixels," but do people (with other browsers) really adjust their pages to resize text so often that it's something to worry about? Or, do they simply set it up how they like it in the beginning, maybe fine tune it a bit for a week or so, then leave it alone after that . . . unless they happen to run across a page sometime in the future which they have trouble reading or something (I would think that they would go back to their previous settings after leaving that page also)?

Who knows, maybe it's just best not to specify font sizes and let the user's defaults come into play(?).

I am saying that it's not ACCESSIBLE to use pixels for font sizing.

I don't presume to speak for the users, and I don't presume that they all have the knowledge to adjust their settings (quite complicated in IE compared to other browsers), or that my choices will match their own.

As for adjusting text, I change the text zoom daily -- there are a lot of "designers" who believe that small type is easy to read. It isn't, and I don't have time to educate the world, so I use text zoom or leave the site.

There are also people who don't set the font sizes at all, and sometimes their choice of font means I need to shrink the text in order to read it comfortably.

So, speaking only for myself, yes, I do adjust my text sizes regularly and it's enough to worry about. However I don't use a PC, and I don't use IE, so designer ignorance doesn't have much of an impact on me.

wow. i didn't realize i was opening such a can of worms.

i was just wondering how to get it to work like the size attribute of the font tag so it's relative and those with poor eyesite that put their browsers on larger or largest can adjust the size that way it's friendlier to more people. this and one other thing are the only parts that i think are still using deprecatedtags. i think i have everything else xhtml compatable.

Me neither, m3rajk. Must have been my ignorance or something, LoL. :batman:

Just have it relative to the main body text (or whatever the parent element is) like this:

body {font-size: 12pt,px,etc.;}
h1 {font-size: 3em;} (would=36pt,px, etc.)
h2 {font-size: 2em;} (would=24pt,px, etc.)
p {font-size: 1em;} (would=12pt,px, etc., the same as the body font size)

And so on. Good luck.

I'll explain it in little words, then.

Use em or keywords.

Do not use pt for screen stylesheets, do use it for print.

i varied the test after you said em the first time. like i said, i was hoping for a way to make it relative and to have the browser be able to override the initial value incase people are like everyone in my family but me: somewhat blind (i have 20/20 in one eye, 20/24 in the other, my dad is the best and he's 30-something in his better eye. my mom's the worst. nearly legally blind. my sister requires glasses (well she uses contacts now) for driving. result is that i know my mom normally bumps up the size of text in her browser so she doesn't need glasses with her, thus i'm looking for a way not to override the browser AND to conform to xhtml, even though i've already met the goal of html 4.01, i figure if i can move to xhtml 1.0 then i should, thus...)

in any case, here's the test page (note i do html set up on this so when i set up new was to embellish the site i use this file to test it and then place the html into php, so there might be other stuff when you look)

http://24.91.157.113/findyourdesire/zhtmlsetup.html

as you can see, the goal of having something that would bel realtive to the user's default size setting is only available in the html tag that's deprecated

m3rajk: I tried to visit the page several times, but it said it was too busy to be used right now. Guess I'll try again later, though. It does seem best to use font sizes based on less-than-optimal eyesight, so what you're trying to do sounds like a good thing.

Suzanne: We've already established (way back on page one) not to use "pt" unless it's for print.

Plus, there's no need for small words, just clear, concise explanations of what it is one is trying to say, without presuming someone is saying something (i.e., about education, etc.) that they are not.

It is truly amazing how some, even so-called "authorities" and/or "organizations" who should know better (yeah, that ".org"), cannot seem to provide good (clear and concise) explanations of things. Just as one can put too many flashy things on a site which distract from the main purpose or attraction of the site, one can also put too much (often irrelevant) information when trying to explain how or why something is or is not . . . or how or why something works well or does not work well.

It just seems that these people ("authorities" and/or "organizations") tend to use long, drawn-out explanations (often with a bunch of links within them which promote confusion) before getting to the actual examples, when the actual examples were sufficient explanations all along. OR, the explanations can be too short, and people trying to learn something from them are "thrown" right into the coding part before the aspects of it are fully explained.

Thankfully, some sites (or whatever) out there do a much better job of explaining things than some others do, with just the right balance (or close to it) of explanation/example. In other words, technical writing should be anything BUT technical if it is to be both accurate and effective.

Quote: Originally posted by m3rajk
thus i'm looking for a way not to override the browser AND to conform to xhtml

To do this, do not set the font size for body in pixels or points. ems and keywords are relative to the size set for the browser. If you set pixels or points as the base size, you over-ride the browser preferences.

If you use em or keywords without setting a base font size, or don't set any font sizing, you'll let folks like your mother see what they want to see, as well as the rest of us (though you may get some curious complaints about things being too big for people in IE who are used to tiny text.

Of course, not to hammer a point home, but don't use points for web display, they are for print only.

m3rajk -- how about using .05em et cetera, instead of attempting - values? Because negative values mean nothing (clearly) to CSS. Validate!

Also, you can try using "larger" and "smaller" for font sizing -- they are relative to the base font size set for BODY or by the browser.

Also, how on earth would you use relative sizing with absolute measures!? Come on! Relative sizing only works with relative measures -- keywords, larger/smaller, em and percent.

i haven't tied points. i'll go add a bunch of point break downs and see if anything works like i want it to.

(note: in case you're wondering, i'm one of those people that thinks that anyone who pop's up windows that never have scrollbars did a bad design choice. mine are always set to auto because of the reasons i mentioned with eyesite and my family. i guess it's the fact that bad eyesite seems to be in my family, but i plan on at least some of the users having eyesite issues when i make sites, and design for those that keep defaults while trying to be friendly to those that change from it)

i think .6 is roughly equivalent to -2.

that worked.. as you can tell at the link i checked 3 of them, and the only way i could get a more exact check would be to add text-decoration:overline to the p style.

to duplicate incase anyone else ants to run this in the future:

note: some   didn't show up. where there's a return carriage followed by a line starting with something other than an indent, i had   at the end of the previous line and starting that line and both as one line in my code. the sdjustment was to stop any potential horizontal scroll

btw: the javascript and css thread is NOT about font sizes but about trying to convert a page that has several frames dynamically written from a form to use css instead of bgcolor since bgcolor is deprecated. and the fact it doesn't like shwat i did to move to css and i've got no clue why. any help would be appreciated

Okay, I saw the test page from the link above (wasn't too busy today I guess ).

May I ask what background colors you are trying to change on this page with CSS, since all I saw was basically red text and a black background? I also saw what appeared to be a small, rectangular table (border only, no text in it) near the top of the page, and a person's name in a bluish color at the bottom (footer area).

Also, it does seem the decimal font sizes are working (I've never tried decimals in CSS before, but maybe one of these days).

the issue in there that's still an issue are two things that are mentioneed in other threads. one is the table being centered, and the other isn the borders within the table. to display the centering issue i added a one celled one rowed table.
http://www.webmaster-forums.net/showthread.php?s=&threadid=22436
http://www.webmaster-forums.net/showthread.php?s=&threadid=22521

Check out the following two pages to see if anything on them might help with centering tables in CSS:

PAGE 1
PAGE 2

ouch. both of them actually make the browser go farther off from what i want.

the first gets the page REALLY wacked out....

i use the centest class....specially made for this

what it was last:
.centest{
margin:auto;
position:absolute; left:50%;
text-align:center;
}

Here's a quote from the 1st link I left above (PAGE 1):

"First, the box's left edge is positioned at the horizontal of the page using 'position:absolute; left:50%;'. Then the box's left margin is set to the opposite of half the box's width using 'margin-left:-266px;'."

I'm not sure, but it looks as though they are talking about one specific box that may have been used as an example somewhere else. In other words, the particular "box" they are talking about is likely different than yours, so it's possible that the values (not the "50%", but the "-266px") may have to be manipulated some according to whatever the size of your "box" is, if that makes sense.

Wish I could help more, but I doubt I could see any of the effects of what they're talking about on my browser (I don't think I've ever even tried the "text-align: center" declaration in any of my CSS yet, but, again, maybe one of these days).

Is it also possible that what you're seeing in Mozilla (what is "wacked out") may not be as "wacked out" in other browsers? Of course, I know you're likely wanting it to be the best possible in Mozilla, Opera, IE, Netscape, etc. (I just hope that is actually possible with these particular CSS declarations).

Good luck.

Quote: position:absolute; left:50%

This will set the left edge of the element 50% across the page, and therefore is not equivalent to 'align="center"'

The following link explains how to centre block and inline elements (be warned though...The spelling isn't great).
http://dorward.me.uk/www/centre/

With reference to the comments about authorities (with apparent implication of the W3C): These people are not writing for the average web designer, they are setting standards for the way high-level languages on the Internet work. If you are looking for a simple explanation of how these standards affect you, don't look to the organisations that create them...They have a much wider target audience than web designers.

unfortunatley non of that helped, because my "boxes" vary in size.

THANK YOU JEEVES!!!!!!!!!!!!

i didn't have margins in the table. just in the cells to get rid of padding... i think i need to do spacing now.. i should double check. that's apparntly a new thing... umm...

that gets the one more thing to css... now i need the border issue and the colorfinder..whch are mentioned in another thread.

jeeves... i hav e questoin for you... since i can't seem to find it, is border-spacing == cellspacing? (when used on tables)

just for the record tables, cellpadding, cellspacing etc are still valid XHTML and in some cases is easier to keep (X)XHTML and CSS seperate as some browsers still have CSS issues.

m3rajk, you should follow Busy's advice, although I wouldn't use tables for design in XHTML - that's what tags are for
Tables can now be used for the purpose they were intended - holding data.

i initally tried for html 4.01 and got that. i used tables for alignment more than anything else ( keeping a set of images aligned in a certain way) and i'm not sure that i wanna screw with changing that o css, because i don't know hqow to and keep the looks standard across screen sizes/browser quirks/etc.

even leaving cell spacing in the (x)html, border is deprecated, and yet acts differently in css and in html, and i've no clue why or how to overcome this without creading a number of cell classes and then needing to know which table class i'm using to put the cell to the corresponding cell class (which i really don't wanna do).

in html, border="1" makes the border co between cells and aroundthe entire table. in css, border-width:1px makes the border around the table, not between the cells. is there a way to get the cells to inherit the border so i just need td{ some:css; things:for; table:cells; }?

yes, as I stated (repeatedly now) -- use conditional CSS! Table and td are separate elements and inheritance works differently!

table#id td {
border: 1px;
}

http://www.w3.org/TR/REC-CSS2/tables.html#collapsing-borders

Geez, m3rajk, it was the first link for Google!

Now for support, why not look at the support grid?

http://devedge.netscape.com/library/xref/2003/css-support/

thing is i started in html 4.01 and used some deprecated tags because i knew the look i wanted would be produced. yet in css it's not exactly the same. obviously i want to collapse, but now, i have another issue, i still done create the lines BETWEEN the cells
so i'm gonna try: border-width:inherit
as part of td, like i said, i would like to avoid needing to tell the cells tohave the borders....

edit:

it looks like i either need inline styles or classes, which is exactly what i'm trying to avoid for the individual cells.

so let's see.. this started on fonts, moved to centering tables, solved both of those. (.2 em is roughly 1 for the size tag in html; margin:auto centers tables) and now it's too figuing out how to get cells to inherit borders without giving each cell a class or inline style

why? why do you need to give a class or inline style?

Are you having multiple styles for different cells in one table? Are some headings? If so, then use . As usual, an URL would be greatly beneficial to determining what you're really asking.

As the forums were down and m3rajk probably didn't get a chance to answer I've posted this reply to get the post back on todays active threads

Also I wanted to support Suzanne in asking for a URI...We could get a much better idea of what you're doing m3rajk!

problem with providng a url no webspace aside form a private server my rents keep tunring off. i have several different starts to tables, thus i'd need several different th classes and td classes for different border sizes/styles

i have some tables that should have no borders, some that i want 1 px wide borders, and some with thicker borders, as well as some different styles for the borders. what i want is a way to have the cell inherit the border from the table. that doesn't seem to work unless i use the html border attribute, which is to be deprecated

Check the following link:
http://www.w3.org/TR/CSS2/selector.html

I have not tested this myself - am at the day-job - so am not sure if this works, but according to the standards it should be:

.tableclass td {
/*CSS Code */
}

In theory this should work on any td that is a decendant of the parent tables class. Obviously you could use a row class as well, or have seperate id's for each td...CSS doesn't support 'inherit' for td's - it does for div tags though; hint, hint

If you give each table a unique id, you can also use contextual CSS to target the th and td elements within it.

That was my point (is this the fourth time I've said it now?) -- the *only* case you'd need to have multiple classes within a table is if you're setting rows to alternating colours or cells to alternating colours within a row. i.e. you'd have to use classes AS WELL if you have some table cells that don't fit into the same context as the others.

There is free space abounding on the web. Get some, and put your test pages there.

http://24.91.157.113/findyourdesire/zhtmlsetup.html

as linked to on the other page.....but like i said, my parents have a habit of just turning it off.

and ther's no ability to upload to geocities or the other freebies, at least none of the ones i know of, and since i have this server i play with and have set up, if i can't then upload to another one it's just going ot be tedious to copy over.

Jeeves: it's tested... does EXACTLY what i was trying to do (or so it seems) the only question is: what's wrong with my understanding of border-collapse? i thought it would make all the borders be one. on the other pages with borders, they all act as onenot with the double border as in the one on that page. i don't understand why.

it: it doesnt' look like each cell has it's own border, but rather that they all have one border. that's what i thought the border-collapse:sollapse; was suppossed to cause.

i'm going to try it on the other pages and letyou know if it worked without the border collapse call (which i thinkis missing from them)

arg. one problem in using that... the tables lose the margin or something like that because they cease to center in mozilla

nooooo.... your code says that the TABLE CELLS have an auto margin, not the TABLE itself.

/* test classes */
.tabletest td{ /* this is just the part */
border-color:#0000ff;
border-collapse:collapse;
border-style:solid;
border-width:5px;
margin:0;
}
.tabletest { /* this is the part */
border-color:#0000ff;
border-collapse:collapse;
border-style:solid;
border-width:5px;
margin: auto;
}

You need to set the table and the table cells separately -- like Jeeves said.

ok. after reading the link he gave i thought .tabletest td{} created a class (tabletest) and set tds within the the class.

i still don't know what's wrong with my understanding of border-collapse. i thought it made all the boders overlap so that i'd see just one line

actually it does explain what's wrong with it... i was setting it for cells, when it works just as i thought when set for tables.

So it all works now?
I still think you would have been better off using div tags, what do you think Suzanne?

Depends on whether he wants the table for data or not... I usually live with the spacing issues (Safari, for instance, doesn't support border-collapse yet) for data, as it doesn't harm the look. N4.x puts a lot of space around tables using this CSS for displaying borders, again, I live with it.

For layout, there isn't anything inherently WRONG with tables, they may even be appropriate for certain audiences or very complex layouts that cannot be done as accessibly with CSS (as it would require all absolute positioning). But in general, many layout tables are unnecessary, and add to the bloat when a DIV would be simpler and work the same. Also, using lists instead of TABLE can really make the code cleaner, easier to understand, and easier to control.

Hmmm, think I can get what you're saying Suzanne - the short answer to my post would be something similair to: "It depends"

From what m3rajk has said it appears better to be using div tags (although - as said - he is converting from HTML transitional), are there any rendering issues with Safari and div tags? Also what about Flash? I heard there were problems making that work (apparently Macromedia's fault?).

I learnt a valuable lesson about CSS the other day, and I think it's relevant to what we've been talking about here:
Was looking around for good examples of CSS designs and came across http://www.csszengarden.com/ I thought the site was great, until I turned up the font size in Opera to 30pt (as a result of this thread ) the designs looked stunning at 9pt, but at 30pt most were worse than they would have been using tables.

Moral of the story: Even if your site validates as having correct XHTML/CSS it does not automatically qualify as more 'accessible.' The power, and therefore the responsibility is still in our hands

it's a combination of data and aligning. it really comes into play in the profiles. the profile has a master table that breaks the differnt things up. trying to align everything with absolutes, and yet remain relative to sizes of the users screen and not get distoreded requires a table since there's a mixture of pictures and words. a good deal of the actual data is actually rendered form pages called via iframes (so using NS4.xx is not possible) in order to speed up page loads (i've seen a few sites with a large amount of data coming from a database using only css. the issue is that once the data reaches a certain point this slows the load time incredibly. ie: when my college campus with the t3 during a vacation prio rto graduation, the site i'm thinking of, on a down time, still took 5 minutes to load a profile page. realizing that i'm not that complex, yet rather diverse with what i'm loading i felt breaking it into sub pages in iframes held by tables when using html4.01 would be the best way to create the layout. now that's it's migrated, or mostly migrated to css, it's possible to use divs, but not necessarily a garuntee that i canmake it shift so things are centered.

btw: demo (when my rents haven't turned off the server on me) can be found at: http://24.91.157.113/findyourdesire/

there's still a few bugs before i go and find a real host.hotmail recently seems to have stopped accepting the mail that gets sent, so when i get a real host i'll also be contacting hotmail, yahoo, lycos, and aol and asking that they stop their killing of the e-mails, and telling them if it's because of complaints that i want the originating ip of every last e-mail with the domain because it means someone's using it without permission.