Cell spacing in a stylesheet

[michele]

Hi,

I'm trying to set cellspacing to 15 left and right and 0 top and bottom
in a stylesheet. Can anyone tell me how to do this?

Much appreciated,

Michele

 

[David Dorward]

I'm trying to set cellspacing to 15 left and right and 0 top and bottom
in a stylesheet. Can anyone tell me how to do this?

http://www.w3.org/TR/REC-CSS2/tables.html#propdef-border-spacing

border-spacing: 15em 0em;

.... although I think 15ems are probably a few too many for you.

Unsupported by MSIE.

 

[Arne]

Hi,

I'm trying to set cellspacing to 15 left and right and 0 top and bottom
in a stylesheet. Can anyone tell me how to do this?

Much appreciated,

Tip: Table cellspacing CSS
http://lists.evolt.org/archive/Week-of-Mon-20020527/113670.html

 

[michele]

Hi,

Your suggestion is not quite working considering I've got a table
inside a table. Let me explain better.

Outside table is:
<table width="780" cellpadding="0" cellspacing="0" class="content">
with one tr with one td in it
..content {
background-image: url(img/butterflybackground.jpg);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: right bottom;
border: 15px white solid;
}
Then, there are two inside tables below this first tr td (each in their
own tr and td) and each of the tables have three tds in one tr. The
total number of cells is seven, like this:
cell
cell cell cell
cell cell cell
Inside tables are:
<table align="center" border="0" cellpadding-left="15"
cellpadding-right="15" cellspacing="0" class="contentinsidetable">
..contentinsidetable {
background-color: #ffffff;
font-family: Verdana, Arial, Helvetica;
font-size: 8pt;
border: 0;
color: #222222;
}
You probably wonder why I don't have one inside table. It's because
there is a title above the second one that has to line up with the
titles in the outside table and that's the only way I could get it to
do it.

So here is my problem. I'm trying to get the inside tables to line up
nicely with the outside and have no extra spaces above and below, but
whenever I do that the three cells across have no space between them
and the text runs together.

What is the best way to accomplish this?

Thanks again for all your help,

Michele

 

[David Dorward]

Your suggestion

What suggestion?
http://www.safalra.com/special/googlegroupsreply/

is not quite working considering I've got a table
inside a table.

Whatever for? http://dorward.me.uk/www/nested/

<table align="center" border="0" cellpadding-left="15"

Your markup is invalid, that can't be helping. http://validator.w3.org/ is
your friend.

font-family: Verdana, Arial, Helvetica;

The trouble with Verdana is that it tempts authors into using font sizes
which are unreadable small when Verdana is not available (it has an off
x-height so it more readable at small font sizes) ...

font-size: 8pt;

.... although that's unreadable for a lot of people even with Verdana
installed.

http://css-discuss.incutio.com/?page=UsingPoints

What is the best way to accomplish this?

1. Don't use tables for layout
http://www.allmyfaqs.com/faq.pl?Tableless_layouts

2. Provide URLs to examples, they are much easier for people to interpret
then fragments pasted into the messages.

 

[michele]

Here is the url.
http://www.quality-computing.com/sawiak/aboutsawiak.asp
It is an iframe inside a table inside
http://www.quality-computing.com/sawiak/index.asp
They rely on the stylesheet sawiak.css (and menu.css which is probably
irrelevant)

It's just a small site that I started to build and what I'm really
trying to do is have cell padding (originally thought it was cell
spacing...i'm confused about the difference) just left and right, and
not top and bottom. That way I can get my margins to line up nicely
around the page contents.

That's interesting what you say about Verdana; it's my font of choice.
What do you like?

In the meantime, I'll study the link you sent on tables because I use
them all the time, albeit with some frustration. Thanks.

 

[David Dorward]

(e-mail address removed) wrote:

http://www.safalra.com/special/googlegroupsreply/
http://www.safalra.com/special/googlegroupsreply/
http://www.safalra.com/special/googlegroupsreply/

Here is the url.
http://www.quality-computing.com/sawiak/aboutsawiak.asp
http://validator.w3.org/check?uri=http://www.quality-computing.com/sawiak/index.asp
http://www.allmyfaqs.com/faq.pl?AnySizeDesign
http://www.allmyfaqs.com/faq.pl?Tableless_layouts

It is an iframe inside a table inside
http://www.allmyfaqs.com/faq.pl?Problems_with_using_frames

http://www.quality-computing.com/sawiak/index.asp
They rely on the stylesheet

Depending on the presence of a style sheet is a bad idea, it usually
indicates that you are using CSS for something you should be using HTML
for ... but you aren't actually doing that

It's just a small site that I started to build and what I'm really
trying to do is have cell padding (originally thought it was cell
spacing...i'm confused about the difference)

border-spacing (on a table) is the distance between the edges of the cells
in a table with their neighboring cells and the border of the table itself
(the property replaces cellspacing).

padding (on a cell) is the distance between the edges of the cell and the
content of the cell.

just left and right, and
not top and bottom. That way I can get my margins to line up nicely
around the page contents.

This sounds like a job for replacing those innermost tables with unordered
lists, and setting a width on each (a percentage width would probably be
best).

That's interesting what you say about Verdana; it's my font of choice.
What do you like?

Bitstream Vera Sans, but its the size that's really important.

 

[michele]

Thanks. Lots of helpful advice and I'm a bit closer to knowing what
I'm doing instead of guessing. I plan to take a course soon.

One thing though. You pointed me to some articles and one at
http://phrogz.net/CSS/HowToDevelopWithCSS.html#tables was very helpful,
but it says limit use of <br> tags. I'd die without my <br>s because I
design for IE, FireFox and Netscape and the line spacing comes out way
different depending upon your browser. Any advice on that and I'd save
a lot of guess and by golly.

Also, I changed all my stylesheet font sizes to ems and I got giganta
font.

 

[Jonathan N. Little]

Thanks. Lots of helpful advice and I'm a bit closer to knowing what
I'm doing instead of guessing. I plan to take a course soon.

One thing though. You pointed me to some articles and one at
http://phrogz.net/CSS/HowToDevelopWithCSS.html#tables was very helpful,
but it says limit use of <br> tags. I'd die without my <br>s because I
design for IE, FireFox and Netscape and the line spacing comes out way
different depending upon your browser. Any advice on that and I'd save
a lot of guess and by golly.

Yes style the margin-top and|or the margin-bottom of the block element.

Also, I changed all my stylesheet font sizes to ems and I got giganta
font.

an 'em' is the width of the font's letter M so 15em would be the 15 x
width of the font's M, in other words, *really big*. Try decimal values
for subtler results, 1.5em

 

[Leonard Blaisdell]

an 'em' is the width of the font's letter M so 15em would be the 15 x
width of the font's M, in other words, *really big*. Try decimal values
for subtler results, 1.5em

An em is related to the font chosen by the user for their browser. 1em
is the equivalent to what the user expects to be his browser's default
font size. 1.5em is one and a half times as large as the browser's
default font size. .8em is eight-tenths as large. Even though it's
available, don't use px.
I'm simply expounding on what Mr. Little said and not disagreeing at all.

leo

 

[Jukka K. Korpela]

An em is related to the font chosen by the user for their browser. 1em
is the equivalent to what the user expects to be his browser's default
font size. 1.5em is one and a half times as large as the browser's
default font size. .8em is eight-tenths as large. Even though it's
available, don't use px.
I'm simply expounding on what Mr. Little said and not disagreeing at all.

Sorry, what Mr. Little said was wrong. Your explanation was better, but it
did not correct the basic mistake, and was a bit misleading too. The em
unit means the size of the font, which is by definition the height of the
font, which is _not_ equal to the width or height of any particular letter
except by coincidence. Roughly speaking, the height of a font is the
vertical distance from the highest ascender's highest point down to the
lowest descender's lowest point.

The em unit means the size of the font of the element itself, except in a
font-size property, where it means the size of the font of the enclosing
element. How it related to the browser's default font depends on the style
sheet(s) involved, as a whole, as well as on user actions. If you set, for
example, * { font-size: 9px; } in your style sheet (a grossly wrong
decision of course, but that's a different issue), then em means 9px,
unless your style sheet is overridden by a user style sheet.

 

[michele]

Okay, so now I've got four people telling me the only proper thing to
do is use em instead of px or pt.

Frankly, this scares me, especially with tables and forms, because I
will never know if things are going to fit on the screen or where
things are going to wrap. I already test my pages in three browsers
times two resolutions. Now I fell that I will need to multiply that by
at least five by using the browers view text size.

Am I making it harder than it needs to be?

 

[Arne]

Okay, so now I've got four people telling me the only proper thing to
do is use em instead of px or pt.

Frankly, this scares me, especially with tables and forms, because I
will never know if things are going to fit on the screen or where
things are going to wrap. I already test my pages in three browsers
times two resolutions. Now I fell that I will need to multiply that by
at least five by using the browers view text size.

Am I making it harder than it needs to be?

The posting convention in news groups is snipping the relevant quotes
down the minimum and interleave the replies beneath it. This is
possible to do even using Google Groups.

http://www.safalra.com/special/googlegroupsreply/

 

[Alan J. Flavell]

Okay, so now I've got four people telling me the only proper thing to
do is use em instead of px or pt.

It's only a case of recognising the way that things are, and
making a start on exploiting it.

Frankly, this scares me, especially with tables and forms, because I
will never know if things are going to fit on the screen

You never *could* know that, but now you're actually aware of the
problem. That's a positive move.

Am I making it harder than it needs to be?

I'd say so. The web was originally designed to be flexible, and it *can*
work rather well that way. From how you talk, you *were* trying to design
that flexibility *out*, but hadn't yet realised its disadvantages.

There's nothing wrong with having it look the way you wanted, in the
browsing situation you had in mind. The interesting thing, from the web's
particular point of view, is what it's going to do in a wider range of
browsing situations. Not just a few (windows can be of any size! Or
indeed none!!). But when you design flexibly, you don't have to test them
all - just a few cases in the middle and near the edges of what's
reasonable. IMHO and YMMv.

 

[Jonathan N. Little]

Jukka K. Korpela wrote:

Sorry, what Mr. Little said was wrong. Your explanation was better, but it
did not correct the basic mistake, and was a bit misleading too. The em
unit means the size of the font, which is by definition the height of the
font, which is _not_ equal to the width or height of any particular letter
except by coincidence. Roughly speaking, the height of a font is the
vertical distance from the highest ascender's highest point down to the
lowest descender's lowest point.

The em unit means the size of the font of the element itself, except in a
font-size property, where it means the size of the font of the enclosing
element. How it related to the browser's default font depends on the style
sheet(s) involved, as a whole, as well as on user actions. If you set, for
example, * { font-size: 9px; } in your style sheet (a grossly wrong
decision of course, but that's a different issue), then em means 9px,
unless your style sheet is overridden by a user style sheet.

This may be semantics here, but 'em' from my fine arts background was
defined as the width of the capital letter 'M' of a certain font for
printing or hand for calligraphy. Therefore the em's actual size would
vary whether the font was compress, normal, demi or extended font of the
same point size. Printers would use 'em' and 'en' to describe the width
of dashes or spaces to their respective 'M' and 'N' character widths for
the font being used. Now how W3C has interpreted this for CSS I will
have to research a bit...

 

[PeterMcC]

Jonathan N. Little wrote in
<[email protected]>

This may be semantics here, but 'em' from my fine arts background was
defined as the width of the capital letter 'M' of a certain font for
printing or hand for calligraphy. Therefore the em's actual size would
vary whether the font was compress, normal, demi or extended font of
the same point size. Printers would use 'em' and 'en' to describe the
width of dashes or spaces to their respective 'M' and 'N' character
widths for the font being used. Now how W3C has interpreted this for
CSS I will have to research a bit...

I'm afraid that somebody misinformed you. The em and the letter M have only
a (very remote) historical relationship and that former relationship is of
little practical value nowadays.

http://css.nu/articles/typograph1-en.html

 

[Andy Dingley]

That's interesting what you say about Verdana; it's my font of choice.
What do you like?

Who cares what you, I or David like ? It's what the _users_ have that
matters. We can wrangle about our personal favourites as much as we
like, but if the user who we're presenting the page to doesn't have that
font, then it just isn't going to happen for them. It's still a
publishing task, not an exercise in personal creativity.

Yes, web font selection is poor. Reliably you have the choice of serif
or sans-serif, and hope that the user has a reasonable default
incarnation of each of those.

Verdana is nasty. As a typeface it's OK, but nothing special. The reason
it's "readable" though is simply that it cheats on the height to appear
bigger for a given specified size. This is a damn nuisance to work with,
especially when you encounter non-Windows users who don't have it. Just
choose a commonplace and well-behaved font, and give it a size that's
readable anyway.