Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Changing font size globally? 4

Status
Not open for further replies.
Sleidia

Sleidia

Technical User
May 4, 2001
1,284
FR

Hi guys,

How can I change the font size globally on every element of a whole site with one single font-size statement?

body { font-size: 10pt; } doesn't have any effect on text within tables.

Thus I need to declare it twice like this :

Code: 
body { font-size: 10pt; } 
td { font-size: 10pt; }

So, what's the catch?

Thanks for the help :)
 
Sort by date Sort by votes
Add to that fact of maintainability, that CSS can improve speed, reduce bandwidth and get you better search engine results then I think there's a strong argument against what you "think". If you don't agree with these facts, there's probably not a lot anyone can say to convince you. However, when recruiting someone, it's easy to tell who understands web applications by the HTML they use.
Click to expand...

From what I read everywhere, I'm not the only one who thinks the way I think.

And luckily, I don't need to be recruited by people who don't share my opinions.

Real users (my clients) don't waste their time looking at how "pure" the code of their website is.



 
Upvote 0 Downvote
From what I read everywhere, I'm not the only one who thinks the way I think.
Click to expand...
I'm 100% sure you're not but I still convinced (by facts, rather than just my opinion) that the "pros" of using CSS far outweigh the "pros" of using tables. Taking into consideration the "cons" of tables, there's a lot more than "cons" of using CSS. Using this reasoning, that's why I come to the conclusion I do.

And luckily, I don't need to be recruited by people who don't share my opinions.

Real users (my clients) don't waste their time looking at how "pure" the code of their website is.
Click to expand...
I'm glad you are in that boat. Most professional web developers I know use their websites, the accessibility of their websites, the maintainability, cost to the client and therefore their reputation as the means of getting their next job. You're lucky if your employers don't demand this.

Also, I'm not saying that client's necessarily look "behind the scenes" as much as we do, but they do (and should) take into accout how easy changes can be made, how fast the site loads and how much bandwidth is used.


____________________________________________________________
Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]

Need help finding an answer? Try the Search Facility or read FAQ222-2244 on how to get better results.
 
Upvote 0 Downvote
Since I have to use em, your example isn't viable.
It doesn't work when em is used instead of pt.
With em, text in nested tables gets smaller and smaller inside each table. That's why I added the last css lines.
 
Upvote 0 Downvote
Which browser are you testing this with? If I nested tables, use "em" instead of "pt" it works in IE6, IE7 and FireFox 2.0:
Code: 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
    <html>
    <head>
        <style type="text/css">
        table {color:red;font-size:5em;}
    </style>
    </head>
    <body>
      <div>
        <div>
          <div>
            <table><tr><td><table><tr><td>Hello</td></tr></table></td></tr></table>
          </div>    
        </div>
      </div>
    </body>
    </html>


____________________________________________________________
Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]

Need help finding an answer? Try the Search Facility or read FAQ222-2244 on how to get better results.
 
Upvote 0 Downvote
Look closer or put your glasses on :)
... or add up more nested tables.
 
Upvote 0 Downvote
Ah I see what you mean if I add text inside another table (my example only had text inside the lowest nested table not the outer ones).

However, doesn't this just prove another pitfall of tables? You've got more markup than is needed AND it's causing problems with setting simple styles. If you still consider nested tables are better, then you'll either have to:

1) Add unnecessary "hacks" or "workarounds" such as multiple descendant selectors
2) Stick with pixel based sizing

Personally, I'd just go with the easier option of not using them as they are even starting to cause you problems.


____________________________________________________________
Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]

Need help finding an answer? Try the Search Facility or read FAQ222-2244 on how to get better results.
 
Upvote 0 Downvote
But if you were really honest, you would admit that there are cases when divs will require more css hacks (and time wasting) than simple nested tables.

I've only added 4 or 5 css lines you know. Took me 2 seconds.

 
Upvote 0 Downvote
And even 3 or 4 lines were too many. I am wondering why are you opting for accessible font sizes and dealing with all the pain of ems if at the same time you're rejecting the accessibility of the whole website. Did you ever think that div is an unnamed block holding information and table is an element holding tabular data? Did you ever think how a screen reader would crawl through all your tables?

Anyway, it is funny that you choose to accept one accessibility guideline but completely ignore the other. And whatever articles you can find on the web in regards to using tables over css are about 4 or 5 years old, when preaching CSS was still very new and lots of people did not want to adopt new technologies. If you look at most prominent websites today, they have mostly converted to a CSS based design.

Here's what you do:
Code: 
body, table, input, textarea, select {
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-size: 0.9em;
}

table table { font-size: 1em; }
I will use tables a lot in my websites but never nest them. If that makes me a nazi, then I guess I am.
 
Upvote 0 Downvote
But if you were really honest, you would admit that there are cases when divs will require more css hacks (and time wasting) than simple nested tables.

I've only added 4 or 5 css lines you know. Took me 2 seconds.
Click to expand...
It depends. When I first started out using CSS, yes I'll admit it took me longer. However, this wasn't a failing of CSS. This was because I was learning a new way of doing things and had to get rid of bad habits. If I had to learn a new server-side language it would take me longer to write an application than it would using one I was comfortable with. Nowadays, I understand CSS and it doesn't take me any longer to use CSS properly than it would for me to use a nested table. The difference is that I'm thinking ahead and this vastly reduces my time in the future if any redesign needs to take place.

If you choose to use some accessibility features of CSS yet ignore others, then there will be times that you run into problems. As you mention it only took "2 seconds" to write in your hacks, shall we assume time is an important factor? If it is, then do you consider the time taken to redesign the site important? Do you consider the time for the page to load to be important?

I'd also be interested to hear what your opinions would be on some of the possible advantages (or what I think are advantages) of CSS such as:

1) It can make your pages load faster
2) It can make it easier to maintain
3) It makes it faster to redesign the site
4) It makes it cheaper to redesign the site
5) It could lower the costs of hosting the site
6) It can make your site more accessible
7) It helps keep a visual consistency throughout the site

Do you agree/disagree with any of these?


____________________________________________________________
Mark,
[URL unfurl="true"]http://aspnetlibrary.com[/url]

Need help finding an answer? Try the Search Facility or read FAQ222-2244 on how to get better results.
 
Upvote 0 Downvote
Use tables for layout if you wish.
But if you plan on mixing CSS in there at least understand what it is you are doing with it.

If you are using a relative unit like an em then of course the fonts within your nested tables will get smaller. The size is inherited from the parent element. Saying 0.9em makes your text 9 tenths of the size of the parent's text.

Vragabond posted that point way back, also he gave a solution that eliminates the 4 lines of CSS by using a single line.

Do what you will, if it works for you then great! It is irrelevant if you use tables or divs. continuous nesting means that you will hit that problem. The way around it is to set a size on the outermost element of a group (if that differs from the parent size).


But I would offer that you are creating the problem by not really 'getting' how an HTML document should be structured.
When you combine the idea of separating structure and style (proper CSS+(X)HTML) with poor, or rather, 'old skool' HTML structure you get into the kind of 'bother' you are experiencing. It's the start of a 5 course Italian dinner where each course is spaghetti.

Learning how to use HTML as it was intended, after all that's how and why CSS is so powerful. Part of the trick is to 'unlearn' what you already know and go back to basics. Actually it's astonishing how many experienced HTML writers can't do this whereas a complete novice picks it up quite quickly.

I could use my small family hatchback for driving off road courses. Pretty soon though it's going to fall apart and repairing it will become more and more complicated and costly. The more 'patches' I apply the harder it will get until eventually it just becomes unviable to continue. At that point though it might be that I've sunk so much time and money into the thing that I can't afford to let go. Or I may not care.

Using tables for layout is fine. If it's the way you prefer to work go ahead. It's perfectly possible to create good work using tables and even to mix in some CSS. No problem.
Don't knock the potential of CSS if you don't really understand it. And to be frank, from what you are showing here you don't. No problem again, we can't be expected to know everything.


back to your problem...
I suggested the use of relative units because with a well structured document they will work best and be most accessible. However, considering your document structure, it's not going to work well and just end up being a tangle.
Set a fixed font size or reset the font size on nested tables using the single line Vragabond suggested.

<honk>*:O)</honk>

Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire
 
Upvote 0 Downvote
Just stepping out of the tables vs. css debate for a moment...

That whole "tables don't inherit body properties" thing is only an issue in quirks mode. If you declare a full DOCTYPE, it isn't an issue:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml"[/URL] xml:lang="en">
<head>
  <title>Some title</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <style type="text/css">
    body { font-size: 2em; }
  </style>
</head>
<body>
  <p>I'm Big</p>
  <table><tr><td>So am I</td></tr></table>
  <div><div><div>
  <table><tr><td>Me too!</td></tr></table>
  </div></div></div>
  <table><tr><td>
     <table><tr><td>I am as well, but no bigger than the others</td></tr></table>
  </td></tr></table>
</body>
</html>
The only elements I know that won't inherit their sizes from <body> are <input> and <textarea>.

We now return to your normal programmes...

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote

Well guys, you make me sound like I'm an anti-css extremist which isn't the case at all. My sites are, I think, a good balance between css and oldschool html.

Again, there is absolutely nothing wrong to use nested tables when needed, for whatever reason, whatever their content is.

Ten years ago, I was a DHTML enthousiast and I did spent hours and hours ruining my eyesight on a daily basis in order to make javascript code totally crossbrowser. Now, I say : never again. And I really mean it : NEVER AGAIN.

When css will be fully mature and equally implemented on every browsers, then I will go with the 100% css route without hesitation.

But currently, I have things difficult enough to deal with (ie: complex PHP applications and mysql queries) and I won't waste my time trying to make a div display properly on every browser when a nested table will do the job.

As for site maintenance, I have developped my own php/mysql driven cms and I just need to throw a html/css template of mine into it to have a whole site's appearance completely changed.



 
Upvote 0 Downvote
That whole "tables don't inherit body properties" thing is only an issue in quirks mode. If you declare a full DOCTYPE, it isn't an issue:
Click to expand...

You know, I thought I mentioned that but reading back I seem to have had one of my blackouts and completely forgotten to do so :)

<honk>*:O)</honk>

Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire
 
Upvote 0 Downvote
I don't want to start another debate, but to me, declaring a doctype is another road to hell.

Not to mention that my sites look 100% the same on IE6, FF and Opera. And that's the only thing that counts for me.

Anyway, as long as it works for me ....
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
776
spamjim
spamjim
lupidol
  • Locked
  • Question
CSS fonts from Google Font 3
Replies
5
Views
269
lupidol
lupidol
kurio71
  • Locked
  • Question
Centre a DIV Regardless of Screen Size 2
Replies
7
Views
197
ChrisHirst
ChrisHirst
audiopro
  • Locked
  • Question
Reliable screen size detection 3
Replies
13
Views
836
vacunita
vacunita
Blueie
  • Locked
  • Question
Safari not rendering font-size correctly 1
Replies
8
Views
255
Olaf Doschke
Olaf Doschke

Part and Inventory Search

Sponsor

Back
Top