Widths and padding / margin..

I am developing a Periodic Table of the Elements
as<DIV>s ..(chuckle - just kidding!) a <TABLE>
at http://www.physci.org/test/chem/,
or rather, the table itself is..
http://www.physci.org/test/chem/ptoe.html

It contains valid HTML and CSS
(checked 'moments' ago).

Am testing in IE 6 on XP. My questions..
The 'width' value of table cells seems to have
no effect, can they be set? If so, how?
How can I collapse the gap between cells
containing chemical elements?

TIA

--
Andrew Thompson
http://www.AThompson.info/
http://www.PhySci.org/
http://www.1point1C.org/

In article <CC8pb.175895$bo1.105157 (AT) news-server (DOT) bigpond.net.au>,
"Andrew Thompson" <andrew64 (AT) bigNOSPAMpond (DOT) com> wrote:

I am developing a Periodic Table of the Elements
as<DIV>s ..(chuckle - just kidding!)

What do we have here?! A friggin' comedian.

a <TABLE
at http://www.physci.org/test/chem/,
or rather, the table itself is..
http://www.physci.org/test/chem/ptoe.html

Very nice!

It contains valid HTML and CSS
(checked 'moments' ago).

You may want to check again:
<http://validator.w3.org/check?uri=ht...org%2Ftest%2Fc
hem%2Fptoe.html>

Am testing in IE 6 on XP. My questions..
The 'width' value of table cells seems to have
no effect, can they be set? If so, how?

Set the width for a cell, using CSS and don't set any width for the
TABLE element, since it's resulting width will be the sum of the width
of the cells.

If you however insist on the TABLE having an explicit width, then what
do you imagine a browser to behave when you set explicit width for cells?

Back in the days of table-layouts, we often had the following situation:

<table width="100%">
<tr>
<td width="200">..</td><td>..</td>
</tr>
</table>

The table would fit itself to the available width of it's container
(often, the browser window), the first cell would be explicitly 200
pixels wide and the third cell would occupy whatever space was left
within the table's boundaries.

Now, imagine:

<table width="100%">
<tr>
<td width="200">..</td><td width="200">..</td>
</tr>
</table>

What would a browser need to do with this? I find it quite reasonable if
a browser ignores the widths on the cells. Now that we do presentational
things with CSS, it is not really that much different.

How can I collapse the gap between cells
containing chemical elements?

<table ... cellspacing="0">

--
Kris
kristiaan (AT) xs4all (DOT) netherlands (nl)

In article Andrew Thompson wrote:

I am developing a Periodic Table of the Elements
as<DIV>s ..(chuckle - just kidding!) a <TABLE
at http://www.physci.org/test/chem/,
or rather, the table itself is..
http://www.physci.org/test/chem/ptoe.html

It contains valid HTML and CSS
(checked 'moments' ago).

Am testing in IE 6 on XP. My questions..
The 'width' value of table cells seems to have
no effect, can they be set?

Browser don't do anything as stupid as set all cells 25 em wide, as then
you would get mile long scrollbar.

No sensible browser allows that. You are also using width:100% for table.
How do you expect both happen? If you don't use width:100% for table, and
use small enaugh value for elemenent cell widths (so that whole table
fits viewport), then all cells will be same size. At least in Opera 7.21.

How can I collapse the gap between cells
containing chemical elements?

table {border-collapse:collapse;}


--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

*Andrew Thompson* <andrew64 (AT) bigNOSPAMpond (DOT) com>:

I am developing a Periodic Table of the Elements
as<DIV>s ..(chuckle - just kidding!) a <TABLE

Hey, I once wanted to do the same to test all the features that HTML4 tables
provide, but quickly lost interest.

The 'width' value of table cells seems to have no effect, can they be set?

Yes.

Applies to: all elements but non-replaced inline elements, table rows, and row groups

OTOH 'margin' doesn't apply to table-cells and the other internal table
elements.

If so, how?

With the 'width' property either on the cells ('td' or 'th') or the column
('col' or 'colgroup'). You'll probably not be able to see it with the
automatic table algorithm used by default. Try "table-layout: fixed.

How can I collapse the gap between cells containing chemical elements?

border-collapse: collapse;

If you use the value 'separate', you can specify the distance with the
'border-spacing' property. IIRC IE doesn't support the latter.

P.S.: Haven't elements 113 and 114 also been created already?
"Periodic Table of the Elements" should be in 'caption', "(c) Andrew
Thompson, 2003" in 'tfoot' and &copy; exists. It's doubtful that you own
any^Wmuch intellectual property on the data on that page, though.

--
Three things matter in a speech:
who says it, how he says it, and what he says,
and of the three, the last matters least.

In article Christoph Paeper wrote:

With the 'width' property either on the cells ('td' or 'th') or the column
('col' or 'colgroup'). You'll probably not be able to see it with the
automatic table algorithm used by default. Try "table-layout: fixed.

Notice that it won't work well (at all really, when trying to use 25em
width for cells) whitout markup changes, as there is only two fixed width
cells on first row and 3 on total. So <col> elements are needed, at
least.

--
Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
Saapi lähettää meiliä, jos aihe ei liity ryhmään, tai on yksityinen
tjsp., mutta älä lähetä samaa viestiä meilitse ja ryhmään.

"Kris" <kristiaan (AT) xs4all (DOT) netherlands> wrote

In article <CC8pb.175895$bo1.105157 (AT) news-server (DOT) bigpond.net.au>,
"Andrew Thompson" <andrew64 (AT) bigNOSPAMpond (DOT) com> wrote:

I am developing a Periodic Table of the Elements
.....
It contains valid HTML and CSS
(checked 'moments' ago).

You may want to check again:
http://validator.w3.org/check?uri=ht...org%2Ftest%2Fc
hem%2Fptoe.html

Dang, that was quick! I blame the Gremlins..

Next try. New versions uploaded (both html and css)

The 'width' value of table cells seems to have
no effect, can they be set? If so, how?

Set the width for a cell, using CSS and don't set any width for the
TABLE element, since it's resulting width will be the sum of the width
of the cells.

TABLE width now gone, ..hmmm seems no different.
(I have applied a width of 500px for the 'el' class)

How can I collapse the gap between cells
containing chemical elements?

table ... cellspacing="0"

Tah.

I do not quite understand why setting
- margin: 0; - in the CSS had no effect tho,
....ehhh, shrugs.

With the space gone from between cells
and a few slight tweaks to the borders, I am
now quite happy with it.

I have even got used to the slightly 'stretchy / squeezy' *
feel of it that allows it to go quite small (it might
even render on a 640x480 monitor w/out scrollbars
if the browser font size is set to 'smallest').

* Ironically, that was an aspect of the original Applet
on which I based it, that I wanted to avoid in the
html/css version!

See the applet (if you have the Java plug-in) ..here
http://physci.org/applet/PToEApplet.htm

Thanks Kris

--
Andrew Thompson
http://www.AThompson.info/
http://www.PhySci.org/
http://www.1point1C.org/

Thanks Lauri for your comments, Cristoph covered
most of it so I'll reply to this..

"Christoph Paeper" <crissov2003Q4 (AT) gmx (DOT) net> wrote

*Andrew Thompson* <andrew64 (AT) bigNOSPAMpond (DOT) com>:

I am developing a Periodic Table of the Elements
as<DIV>s ..(chuckle - just kidding!) a <TABLE

Hey, I once wanted to do the same to test all the features that HTML4
tables
provide, but quickly lost interest.

?? Just this one, I promise!

The 'width' value of table cells seems to have no effect, can they be
set?

Yes.

| Applies to: all elements but non-replaced inline elements, table rows,
and row groups

OTOH 'margin' doesn't apply to table-cells and the other internal table
elements.

If so, how?

With the 'width' property either on the cells ('td' or 'th') or the column
('col' or 'colgroup'). You'll probably not be able to see it with the
automatic table algorithm used by default. Try "table-layout: fixed.

...hmm. I would have to investigate that further before I
clearly understood what you are saying, but the table
is good now.

How can I collapse the gap between cells containing chemical elements?

border-collapse: collapse;

Thank you. I thought there _must_ be a way to do it
in CSS..

If you use the value 'separate', you can specify the distance with the
'border-spacing' property. IIRC IE doesn't support the latter.

P.S.: Haven't elements 113 and 114 also been created already?

Probably.. you'd think they'd be running out of "U's"!

"Periodic Table of the Elements" should be in 'caption', "(c) Andrew
Thompson, 2003" in 'tfoot'

Do you mean to label that cell of the table tfoot, or move
it to the bottom?

and &copy; exists.

yes, sloppy of me..

It's doubtful that you own
any^Wmuch intellectual property on the data on that page, though.

'fixed' ;-)
_________________________________________
With the removal of the '..stupid as set all cells 25 em wide'
bit (..hey, I was _playing_, ok?) the table has settled in nicely.

It reduces down nice and small for small font size.

Thank you all!

--
Andrew Thompson
http://www.AThompson.info/
http://www.PhySci.org/
http://www.1point1C.org/

"Brian" <usenet1 (AT) julietremblay (DOT) com.invalid-remove-this-part> wrote in
message news:V2bpb.66875$9E1.280354 (AT) attbi_s52 (DOT) ..
....

*Andrew Thompson* <andrew64 (AT) bigNOSPAMpond (DOT) com>:

I am developing a Periodic Table of the Elements as<DIV>s
..(chuckle - just kidding!) a <TABLE

OT
Perhaps you should use the <abbr> element for the symbols. That'd make
it quite a bit more functional, no?

Tried it for lithium. That is cool.
Looks great in Mozilla 1.3a - does not
seem to work in IE6 though.

Since I will eventually be adding links to each of the
element symbols*, I might simply (and improperly,
as I understand from previous posts) use..
<a href="lithium.jsp" TITLE="Lithium">Li</a>

If it does not work for a particular browser, it
should not be a great loss, since the visitor would
just need click the link for further details in any case.

* I will be ultimately be using JSP and servlets
to extract data from a Java .jar and render it
using 'html' and css. But I find it is best to get
the html and css straight before worrying about
other factors.

How can I collapse the gap between cells containing chemical
elements?

border-collapse: collapse;

Thank you. I thought there _must_ be a way to do it in CSS..

Note that IE 5/Mac does not support this. You'll have to resort
to cellspacing for that browser.

Uugghh, alright. I need to do some serious _backwards_
compatibility testing, but I have not decided how far it
is worth pushing it, especially when the information is
technical and readable.

I might have to 'inline' the colors though..

--
Andrew Thompson
http://www.AThompson.info/
http://www.PhySci.org/
http://www.1point1C.org/

"Andrew Thompson" <andrew64 (AT) bigNOSPAMpond (DOT) com> wrote

"Brian" <usenet1 (AT) julietremblay (DOT) com.invalid-remove-this-part> wrote in
message news:V2bpb.66875$9E1.280354 (AT) attbi_s52 (DOT) ..

Chemical symbol Li (lithium)...

Perhaps you should use the <abbr> element for the symbols. That'd make
it quite a bit more functional, no?

Tried it for lithium. That is cool.
Looks great in Mozilla 1.3a - does not
seem to work in IE6 though.

Since I will eventually be adding links to each of the
element symbols*, I might simply (and improperly,
as I understand from previous posts) use..
a href="lithium.jsp" TITLE="Lithium">Li</a

If it does not work for a particular browser, it
should not be a great loss, since the visitor would
just need click the link for further details in any case.

Scrap that - reconsidered. Since I am prepared
to lose the pop-up text for 'lesser abled' browsers,
I may as well use the <attr> as it seems intended,
and wrap that in an unTitled <a>..
For demonstraion purposes I now have a version
up that uses
<abbr> for lithium
<a title> for beryllium
<a><abbr title> for phosphorus.

I'll go with the format for phosphorus.

--
Andrew Thompson
http://www.AThompson.info/
http://www.PhySci.org/
http://www.1point1C.org/

In article <vSbpb.175944$bo1.138718 (AT) news-server (DOT) bigpond.net.au>,
"Andrew Thompson" <andrew64 (AT) bigNOSPAMpond (DOT) com> wrote:

If it does not work for a particular browser, it
should not be a great loss, since the visitor would
just need click the link for further details in any case.

Scrap that - reconsidered. Since I am prepared
to lose the pop-up text for 'lesser abled' browsers,
I may as well use the <attr> as it seems intended,
and wrap that in an unTitled <a>..
For demonstraion purposes I now have a version
up that uses
abbr> for lithium
a title> for beryllium
a><abbr title> for phosphorus.

I'll go with the format for phosphorus.

<http://www.xs4all.nl/~apple77/abbr_support/>
Check it in IE/Win. I don't deserve credit for it.

--
Kris
kristiaan (AT) xs4all (DOT) netherlands (nl)