Stylesheets - Table Header

Author

Table Header

shapper

2007-11-14, 6:20 pm

Hello,

I created a table and applied an image as background in table header:
..MyTable th
{
font: normal 0.7em verdana,arial,helvetica,sans-serif;
background: url(Images/Header.jpg) repeat-x 0px 0px;
padding: 4px;
}

The problem is when I click CTRL + to increase the font size the
background does not fill all header.
The image is a gradient from Top to Down.

Is this possible to solve this?

Is even a good idea to use an image as background in a table header?

Thanks,
Miguel

dorayme

2007-11-14, 10:16 pm

In article
<1195081728.363420.201330@o80g2000hse.googlegroups.com>,
shapper <mdmoura@XXXXXXXXXX> wrote:

> Hello,
>
> I created a table and applied an image as background in table header:
> .MyTable th
> {
> font: normal 0.7em verdana,arial,helvetica,sans-serif;
> background: url(Images/Header.jpg) repeat-x 0px 0px;
> padding: 4px;
> }
>
> The problem is when I click CTRL + to increase the font size the
> background does not fill all header.
> The image is a gradient from Top to Down.
>
> Is this possible to solve this?
>
> Is even a good idea to use an image as background in a table header?
>
It is ok, no particular badness about it. Perhaps you can look
at the following to get an idea of what to do:

http://tinyurl.com/yqndfb

You need to prepare the image correctly and choose the right
direction and get your markup right. It is hard to know your
problem since you do not supply url. But the above I whipped up
for you might help?

--
dorayme

Beauregard T. Shagnasty

2007-11-14, 10:16 pm

shapper wrote:

> I created a table and applied an image as background in table header:
> .MyTable th
> {
> font: normal 0.7em verdana,arial,helvetica,sans-serif;
..................^^^ ^^^^^^^

Read this:
http://k75s.home.att.net/fontsize.html

--
-bts
-Motorcycles defy gravity; cars just suck

shapper

2007-11-15, 3:15 am

On Nov 15, 12:42 am, "Beauregard T. Shagnasty"
<a.nony.m...@example.invalid> wrote:
> shapper wrote:
>
> .................^^^ ^^^^^^^
>
> Read this:http://k75s.home.att.net/fontsize.html
>
> --
> -bts
> -Motorcycles defy gravity; cars just suck

Hi,

I read the article and in fact I was reading a few things about font
size a few weeks ago.
My conclusion was that I should use something like:
body
{
font: normal 0.7em verdana,arial,helvetica,sans-serif;
}

And then everything relative to it like:
h1 {font: normal 120% verdana,arial,helvetica,sans-serif;}
..note {font: normal 70% verdana,arial,helvetica,sans-serif;}

Am I thinking wrong?

Thanks,
Miguel

dorayme

2007-11-15, 3:15 am

In article
<50f2c0f0-4e65-4d2b-9c2d-f6cbeb754ecd@d50g2000hsf.googlegroups.co
m>,
shapper <mdmoura@XXXXXXXXXX> wrote:

> I read the article and in fact I was reading a few things about font
> size a few weeks ago.
> My conclusion was that I should use something like:
> body
> {
> font: normal 0.7em verdana,arial,helvetica,sans-serif;
> }
>
> And then everything relative to it like:
> h1 {font: normal 120% verdana,arial,helvetica,sans-serif;}
> .note {font: normal 70% verdana,arial,helvetica,sans-serif;}
>
> Am I thinking wrong?

You are starting too small. .7em is too tiny to set for body
text. But you are right that everything else is relative to that
under normal conditions.

--
dorayme

shapper

2007-11-15, 3:15 am

On Nov 15, 3:23 am, dorayme <doraymeRidT...@optusnet.com.au> wrote:
> In article
> <50f2c0f0-4e65-4d2b-9c2d-f6cbeb754...@d50g2000hsf.googlegroups.co
> m>,
>
> shapper <mdmo...@XXXXXXXXXX> wrote:
>
>
>
> You are starting too small. .7em is too tiny to set for body
> text. But you are right that everything else is relative to that
> under normal conditions.
>
> --
> dorayme

I also saw two other approaches:
1. Setting body text to 100% and everything else using em
2. Setting body text and everything in percentage.

I am a little bit confused now. What is the best way to do it?

I started with 0.7 em because of something that I read.
Maybe I should use 100% in body.

What is the difference between using % or ems?

Thanks,
Miguel

Beauregard T. Shagnasty

2007-11-15, 3:15 am

shapper wrote:

> I also saw two other approaches:
> [XXX]. Setting body text to 100% and everything else using em
> 2. Setting body text and everything in percentage.
...as my page recommends.

> I am a little bit confused now. What is the best way to do it?

Use percentages as my page recommends.

> I started with 0.7 em because of something that I read.
> Maybe I should use 100% in body.

Yes.

> What is the difference between using % or ems?

If you use em on the body, you run afoul of the IE bug that *doubles*
size when someone increases from, say, medium to larger, instead of
getting the expected slight increase.

--
-bts
-Motorcycles defy gravity; cars just suck

dorayme

2007-11-15, 3:15 am

shapper wrote:

> dorayme wrote:

[color=darkred]
> I also saw two other approaches:
> 1. Setting body text to 100% and everything else using em
> 2. Setting body text and everything in percentage.
>

Either is ok. I do your number 1 and set as few sizes as
possible. You might try to forget about setting fonts and font
sizes altogether till you have finished making your site. Take a
look at it and see if you need to.

> I am a little bit confused now. What is the best way to do it?
>
> I started with 0.7 em because of something that I read.
> Maybe I should use 100% in body.
>
> What is the difference between using % or ems?
>

If you use body (font-size: 1em;}, some versions of Internet
explorer miscalculate relative sizes later. So use 100%. You can
use em for headings and footers later.

--
dorayme

Bergamot

2007-11-15, 6:17 pm

shapper wrote:
>
> What is the difference between using % or ems?

As far as font-size goes, they are interchangeable.
100% = 1em, 120% = 1.2em, 90% = .9em

You *need* to set body in % units because of IE bugs. Since there is no
benefit in switching to ems for other font-size settings, might as well
stick with % throughout.

--
Berg