Changing font size globally? 4

[Sleidia]

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 :

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

So, what's the catch?

Thanks for the help

 

[Vragabond]

For some reason, browsers are sometimes reluctant to inherit font properties in tables and form input fields. It is purely a browser issue, as according to the standards they are always supposed to inherit the font information from the parent unless stated otherwise.

The way you're doing it should be fine. Just define it additionally for all the elements that seem to forget to inherit.

 

[Sleidia]

Thanks but that sucks really
Even Firefox isn't able to apply the body font-size to the tables.

 

[Sleidia]

Well, I've just found out it's simpler to do this :

body, td, div, span, input, select, textarea {

font-size: 10pt;

}

 

[Foamcow]

Isn't that what Vragabond suggested?

I think all you really need to do is

body, table {
  font-size: 10pt;
}

Incidentally, it might be worth reading up on using font size keywords and relative units such as em and % to aid accessibility in older browsers.


<honk>*:O)</honk>

Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[Vragabond]

In your case, you could simply do:

* {
  font-size: 10pt;
}

This would not usually apply in most cases, because I prefer to set all my font sizes in relative measurement so that each user can adjust the size to their preference.

 

[Sleidia]

hi

body, table {
  font-size: 10pt;
}

wouldn't work because it wouldn't change the font size of divs and spans as well.

Also, it can happen that tables are inside divs.

Incidentally, it might be worth reading up on using font size keywords and relative units such as em and % to aid accessibility in older browsers.

I have a question about this!

When I use

/* all elements */

body, td, div, span, input, select, textarea {

font-size: 0.9 em;

}

... the font size doesn't change in Firefox.
Even when I set it to 0.4em!

Why such a behaviour?

What I plan to do is set a 0.9 em for all the elements and then use n% for specific child elements.

 

[Sleidia]

Vragabond,

Is the wildcard supported by all browsers?

Thanks!

 

[Vragabond]

There should be no space between the value and the unit. [tt]15em[/tt] will not be read the same as [tt]15 em[/tt]. The first will render something at 15em, the second will render it at 15 default (or whatever browser decides to choose).

As I understand, asterisk is supported in all the current browsers.

As for only needing the body and table cell, Foamcow is right. Every other element (save for form input elements) will inherit the font information from body. If this is not happening in your example, you must have something overriding that property.

Finally, your idea of setting em sized font for all of the elements can severely backfire. If body has 0.9em font, then div inside a body will have 0.9em of the 0.9em -- thus a smaller font than expected. You could come up with a text that is completely unreadable.

 

[Sleidia]

Thanks

It think I will stick to pt unit for the global font-size and use % for the rest.

The cascading effect of em sounds too bothersome to tackle.

 

[Vragabond]

Of course it sounds bothersome when you invent things that are not there. If you do (which was suggested to you by Foamcow many a posts ago) a simple:

body, table {
  font-size: 0.9em;
}

it will work as requested. Body will have a 0.9em size font and all normal tags will inherit that size. Tables have 0.9em specified, so they (because they do not inherit) will have 0.9em as well. If you need to cover all your bases, you can add select, input and textarea to the batch as well. As for the nesting, there can only be one body, inputs, selects and textareas cannot be nested and tables should not be nested.

 

[Sleidia]

Hmmm maybe I'm stupid (I hope not ahaha) but, as I said, I can have tables contained inside div tags.

So, those tables wouldn't inherit properties from
body, table { ... } ( which I already tested )

As for the " tables should not be nested.", this sound like the kind of stuff I read from some of the CSS nazis out there

Personally, I always want to use the best things of both worlds (tables and css).

 

[Foamcow]

Umm.

body, table {
  font-size:0.9em;
}

Means the same as

body {
  font-size:0.9em;
}

table {
  font-size:0.9em;
}

set body and anything within it to 0.9em
AND
set all tables and anything within them to 0.9em


So any divs within tables would inherit the font size set for the table.

Anything within the body tag would also inherit the font size.

The only reason you can't just specify a size for the body is that tables don't inherit from the body tag. But we cover that eventuality by also specifying the size for the table.

It doesn't matter that the tables are inside DIV tags. You are specifically setting a size for ALL table tags irrelevant of where they are in the document.


<honk>*:O)</honk>

Earl & Thompson Marketing - Marketing Agency Services in Gloucestershire

 

[ca8msm]

As for the " tables should not be nested.", this sound like the kind of stuff I read from some of the CSS nazis out there

Ever thought people are giving you this advise for a reason (and I'm not sure they would appreciate your term for them)?

Personally, I always want to use the best things of both worlds (tables and css).

Don't we all? So, when you come across a need for displaying tabular data, use a table. When you need to set the layout for a page, don't use a table. Fairly logical and simple to understand, I think.


____________________________________________________________
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.

 

[Sleidia]

Ok Thanks

As for the nested tables that I still intend to use, I had to do this :

/* all elements */

body, table, input, textarea, select {

font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 0.9em;

}

table table { font-size: 1em; }
table table table { font-size: 1em; }
table table table table { font-size: 1em; }
table table table table table { font-size: 1em; }

 

[Sleidia]

when you come across a need for displaying tabular data, use a table. When you need to set the layout for a page, don't use a table. Fairly logical and simple to understand, I think.

I disagree with this.

Someone said it better than me :

One thing I never get is people saying "Tables are meant for tabular data"

That may be what their original purpose was, but who cares?
Computers were originally designed to do math and print out text.
Choo choo trains were originally designed to carry freight.
cars were originally designed to get from A to B, not for racing or off roading or pulling 40 foot trailers.
Microwaves were originally used for transmitting data, not heating food.

Oh, I need a structured layout, but it isn't numbers, so I can't use it????

from

http://forums.digitalpoint.com/showthread.php?t=13125

 

[ca8msm]

Umm, why have you done that? As FoamCow and Vragabond both explained above, it doesn't matter if your tables are nested as the CSS will select ALL tables regardless of if they are nested inside a div. e.g.

    <!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:20pt;}
	</style>
    </head>
    <body>
      <div>
        <div>
          <div>
            <table><tr><td>Hello</td></tr></table>
          </div>	
        </div>
      </div>
    </body>
    </html>

The table above is nested inside mulitple divs yet it still gets the CSS set...


____________________________________________________________
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.

 

[Sleidia]

Try with tables nested inside tables and you'll understand.
In your example, tables are nested inside divs, not tables.

 

[ca8msm]

I disagree with this.

Someone said it better than me :
...
Oh, I need a structured layout, but it isn't numbers, so I can't use it????

Tables aren't limited to numbers. They can hold any form of tabular data. What we are getting at is that for presentation, they have lots of downfalls. Ever tried to redesign a site built using tables? If you have, you'll realise how much harder it can be than redesigning a site that uses a CSS approach. If you haven't, then you're lucky as someone else has probably had to pick up the pieces.

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.



____________________________________________________________
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.

 

[ca8msm]

Try with tables nested inside tables and you'll understand.
In your example, tables are nested inside divs, not tables.

OK, I will...

    <!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:20pt;}
	</style>
    </head>
    <body>
      <div>
        <div>
          <div>
            <table><tr><td><table><tr><td>Hello</td></tr></table></td></tr></table>
          </div>	
        </div>
      </div>
    </body>
    </html>

Did it still work?


____________________________________________________________
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.