table cellspacing

E

Eustace

At last I managed to make my webpage

http://www.geocities.com/emfrilingos/fril

fully compliant with html 4.01 Strict. But there is a slight issue that
leaves me unsatisfied:

In the <head> I have defined a class table.poem{} as

table.poem {
margin: 0 auto;
text-align: left;
border-width: 10px;
border-style: outset;
}

table.poem td {
border-width: 1px;
padding: 0em 1em 0px 1em;
border-style: inset;
}


In the <body> I use it as

<table class="poem" cellspacing=10>
....

What should I add/change to the css definition so I don't have to use
cellspacing=10 when I call the class in the body?

Thanks,

Eustace

PS. I post this because I don't see in the newsgroup a similar message
over 12 hours ago.
 
B

Ben C

At last I managed to make my webpage

http://www.geocities.com/emfrilingos/fril

fully compliant with html 4.01 Strict. But there is a slight issue that
leaves me unsatisfied:

In the <head> I have defined a class table.poem{} as

table.poem {
margin: 0 auto;
text-align: left;
border-width: 10px;
border-style: outset;
}

table.poem td {
border-width: 1px;
padding: 0em 1em 0px 1em;
border-style: inset;
}


In the <body> I use it as

<table class="poem" cellspacing=10>
...

What should I add/change to the css definition so I don't have to use
cellspacing=10 when I call the class in the body?
Click to expand...

Add border-spacing: 10px (and get rid of the cellspacing attribute).
Might not work in IE.
 
A

Andy Dingley

At last I managed to make my webpage
http://www.geocities.com/emfrilingos/fril
fully compliant with html 4.01 Strict.
Click to expand...

You can't host a compliant page on Geocities, as their inserted
JavaScript banner code breaks your page structure. You can't even
achieve a standards-mode rendering page! I regard this as sufficient
reason to not host with Geocities.

table.poem {
margin: 0 auto;
text-align: left;
border-width: 10px;
border-style: outset;
}
Click to expand...

Your use of one-cell tables simply to place borders around things is a
fairly gross abuse of <table>. Use a single <div>, if you're only
having one cell.
 
R

rf

Andy Dingley said:
You can't host a compliant page on Geocities, as their inserted
JavaScript banner code breaks your page structure. You can't even
achieve a standards-mode rendering page! I regard this as sufficient
reason to not host with Geocities.



Your use of one-cell tables simply to place borders around things is a
fairly gross abuse of <table>. Use a single <div>, if you're only
having one cell.
Click to expand...

h1 I would say in this case :)
 
J

Jukka K. Korpela

Scripsit Ben C:
Add border-spacing: 10px (and get rid of the cellspacing attribute).
Might not work in IE.
Click to expand...

Does not work in IE, making the whole idea worse than pointless. What's
the idea of replacing code by something that does not work on the most
popular browser just to "comply with HTML 4.01" (especially since in
this case, the page does not actually comply with any HTML specification
anyway)?

Note: The tables are really just for getting borders around poems.
Ideally, we would use <p> elements with suitable CSS settings, but this
isn't practical. A single-cell table is a hack, but it's the simplest
hack for producing a box that is as wide as needed by its content. So
there's really no need to change the author's current approach.
 
B

Ben C

Scripsit Ben C:


Does not work in IE, making the whole idea worse than pointless. What's
the idea of replacing code by something that does not work on the most
popular browser just to "comply with HTML 4.01" (especially since in
this case, the page does not actually comply with any HTML specification
anyway)?
Click to expand...

Often it helps to know that there is a proper way of doing something,
even if for some practical purposes you can't always use it.
Note: The tables are really just for getting borders around poems.
Ideally, we would use <p> elements with suitable CSS settings, but this
isn't practical. A single-cell table is a hack, but it's the simplest
hack for producing a box that is as wide as needed by its content.
Click to expand...

A float would be ever simpler.

..poem
{
float: left;
clear: left;
border: 2px solid black;
}
 
B

Ben C

A float would be ever simpler.

.poem
{
float: left;
clear: left;
border: 2px solid black;
}
Click to expand...

Actually looking back at the OP's OP, he wants them centered, so a float
won't work.

So I will now suggest:

body { text-align: center }

.poem
{
display: inline-block;
border: 2px solid black;
}

with <br>s between the inline blocks.

Doesn't work in IE or Firefox, but should be fine in Opera or Safari.
 
E

Eustace

Actually looking back at the OP's OP, he wants them centered, so a float
won't work.

So I will now suggest:

body { text-align: center }

.poem
{
display: inline-block;
border: 2px solid black;
}

with <br>s between the inline blocks.

Doesn't work in IE or Firefox, but should be fine in Opera or Safari.
Click to expand...

The main attraction of using <table> is the 3D borders that give the
impression of the content being encased in a frame. If I knew of a way
to create the same effect I would consider it. A solid border is out of
question. The possibility of using border-style is essential.

But I see that I can use border-style: outset with your code... Now the
main problem I have to solve is how to make the block as wide as needed
for the content. Thanks everybody for the ideas you gave me.

Eustace
 
E

Eustace

You can't host a compliant page on Geocities, as their inserted
JavaScript banner code breaks your page structure. You can't even
achieve a standards-mode rendering page! I regard this as sufficient
reason to not host with Geocities.
Click to expand...

I take care of my own code and let Geocities take care of theirs. Up
till now Geocities has been satisfactory for my needs and purposes,
though of course their introduction of the right-hand panel wasn't very
nice, but on the other hand one can close it, as I would expect my
visitors to do.
Your use of one-cell tables simply to place borders around things is a
fairly gross abuse of <table>. Use a single <div>, if you're only
having one cell.
Click to expand...

"fairly gross abuse of <table>"! That seems a fairly harsh criticism. I
started using once cell tables long before I knew of css, and I doubt
that the couple of (rather dated now) books I have read on html provide
alternate solutions. One of the advantages of posting to newsgroups like
this is, however, extending and updating one's knowledge.

On the theoretical side, I have been working on a Java program that
solves spherical trigonometry triangles. One might say that a spherical
triangle in which 1 angle is 180° (and the other 2 are 0°) is "a fairly
gross abuse of a spherical triangle"! Theoretically, however, it *is* a
spherical triangle, though an extreme case of one, and, on the practical
side, one that is often encountered when you try to calculate the
distance between two locations of the same longitude; and it has to be
treated as such: the triangle solver should accept is as a triangle and
provide results. In this frame of thought, my idea of using a single
cell table did not seem more extreme than the idea of a triangle that
looks like a straight line.

Regards,

Eustace
 
B

Beauregard T. Shagnasty

Eustace said:
The main attraction of using <table> is the 3D borders that give the
impression of the content being encased in a frame. If I knew of a
way to create the same effect I would consider it. A solid border is
out of question. The possibility of using border-style is essential.
Click to expand...

You do not need to use a table for those (usually ugly) borders.

Put this in your CSS:

..boxy {
border-top: 8px outset #f66;
border-left: 8px outset #f66;
border-right: 8px outset #c30;
border-bottom: 8px outset #c30;
padding: 0.25em;
}

...and assign it to a paragraph, or a div, in your HTML:

<p class="boxy">This is a paragraph with borders.</p>

Remember, if you want to emulate "sunlight", the top and left are the
lighter colors, the bottom and right are darker. Use "inset" instead of
"outset" to make it look like a hole.

Super-wide borders are very distracting.
 
B

Ben C

On 2008-02-13 said:
The main attraction of using <table> is the 3D borders that give the
impression of the content being encased in a frame. If I knew of a way
to create the same effect I would consider it. A solid border is out of
question. The possibility of using border-style is essential.

But I see that I can use border-style: outset with your code...
Click to expand...

Correct-- you should be able to put any kind of border on any element.
Now the main problem I have to solve is how to make the block as wide
as needed for the content. Thanks everybody for the ideas you gave me.
Click to expand...

Since you also want the blocks of content centered your options are, in
descending order of aesthetic preference (which strangely enough is the
same as ascending order of browser support):

1. display: inline-block (KO)
2. display: table (FKO)
3. HTML tables (FKOE)
4. Some kind of JavaScript solution (FKOE)

K = Konqueror/Safari
F = Firefox
O = Opera
E = Internet Explorer

See also dorayme's page:

http://netweaver.com.au/alt/shrinkToFitCentring/centeringShrinkToFit.html
 
D

dorayme

Eustace said:
At last I managed to make my webpage

http://www.geocities.com/emfrilingos/fril

fully compliant with html 4.01 Strict. But there is a slight issue that
leaves me unsatisfied:

In the <head> I have defined a class table.poem{} as

table.poem {
margin: 0 auto;
text-align: left;
border-width: 10px;
Click to expand...


You seem to like the look of

<http://netweaver.com.au/alt/eustace.html> ?

About your question, and to take some liberties, I would have
thought:

http://netweaver.com.au/alt/eustace2.html

But if it was me, I would have done something like:

http://netweaver.com.au/alt/eustace3.html

Notice how for IE 6, I have had to reduce the width of the div
from 33em to 26em! It beggars belief!
 
B

Bergamot

Beauregard said:
.boxy {
border-top: 8px outset #f66;
border-left: 8px outset #f66;
border-right: 8px outset #c30;
border-bottom: 8px outset #c30;
}
Click to expand...

FYI, if you used just
..boxy {border: 8px outset #f66;}

the browser would determine the top/left and bottom/right colors
automatically. Ditto inset. The results would be the same as what you
coded, though probably won't be the same across browsers.
<p class="boxy">This is a paragraph with borders.</p>
Click to expand...

Too bad that won't shrink-wrap the box, though. :(
 
E

Eustace

You seem to like the look of

<http://netweaver.com.au/alt/eustace.html> ?

About your question, and to take some liberties, I would have
thought:

http://netweaver.com.au/alt/eustace2.html

But if it was me, I would have done something like:

http://netweaver.com.au/alt/eustace3.html

Notice how for IE 6, I have had to reduce the width of the div
from 33em to 26em! It beggars belief!
Click to expand...

Thanks a lot! No, I prefer you first solution, though I will have to
examine what you do with the other 2 too. I haven't thought yet why, but
it has an added advantage to the first one of which I am not sure
whether you are aware of: Over here, on my WinXp I use white text on
blue background. In FF all three webpages are displayed black text on
white background. In IE, however, the first displays as white text on
blue background, but the other 2 have the box with black text on white
background all right, but have the rest of the screen blue, which
doesn't look very nice and certainly is not your intended effect (though
I am sure there is a way that this can be taken care of). But the issue
of colors on my webpage is another one that I still have to work on.
Though I specify the colors in the body ccs code, it doesn't seem to
work always, yesterday it did, today it didn't. I don't know why, but
for now I had to add old code: <body text=navy bkground="#ccccff"> that
is not in accordance with the 4.01 Strict rules...

Based on earlier advice, I have already changed the meander separator
line to:

div.meander {
margin-top: 30px;
margin-bottom: 30px;
height: 15px;
width: 100%;
border: 0px;
padding: 0px;
background-image:url("fril/meander.gif");
}

which is called in a single short line:

<div class="meander"></div>

In this particular case, it is certainly a simpler and more elegant
solution to having to call:

<table class="meander">
<tr><td></td></tr>
</table>

Tomorrow I'll be working on the poem code.

Cheers,

Eustace
 
E

Eustace

Correct-- you should be able to put any kind of border on any element.


Since you also want the blocks of content centered your options are, in
descending order of aesthetic preference (which strangely enough is the
same as ascending order of browser support):

1. display: inline-block (KO)
2. display: table (FKO)
3. HTML tables (FKOE)
4. Some kind of JavaScript solution (FKOE)

K = Konqueror/Safari
F = Firefox
O = Opera
E = Internet Explorer

See also dorayme's page:

http://netweaver.com.au/alt/shrinkToFitCentring/centeringShrinkToFit.html
Click to expand...

Wow! this is a great newsgroup! If I had asked for advice here a week
ago I would probably have avoided a lot of work. You learn better, of
course, when you find out by yourself, but still...

Sorry for those who use other browsers, but I am focused on FF and IE. I
suppose most who do not use regularly IE still keep one on the side for
cases when it is needed - at least that is what I do. But I do think
it's better to be W3C compliant - I would only express the hope that
they will stop changing things very often, so the browsers and the
website designers have time to follow them closely.

Anyway, yesterday before posting the message here, at the very end of a
few hours of working on the code I managed to break a few things and
today I had first to set them right and then start improving on the
basis of the suggestions I got here. I added border-spacing: 10px
suggested by Ben. Yes, it's not supported by the IE, but it is W3C
compliant and anyway the IE effect without it is not that bad. And as I
write elsewhere, I already changed the code for the meander separator.

The pages with the examples seem very useful. I only wish I had come
across them a couple of days ago, when I googled a lot of pages looking
for info.

Thanks,

Eustace
 
B

Beauregard T. Shagnasty

Eustace said:
Sorry for those who use other browsers, but I am focused on FF and IE.
I suppose most who do not use regularly IE still keep one on the side
for cases when it is needed - at least that is what I do. ...
Click to expand...

What would you expect people who do not use Windows to do?

If a site will not work unless IE is used, I just go elsewhere. I
changed banks a couple years ago because of their IE-only web site.
 
D

dorayme

"Beauregard T. Shagnasty said:
I
changed banks a couple years ago because of their IE-only web site.
Click to expand...

OK, you did. But let's go back in time and suppose that the bank
with the IE-only offered you n% more interest on your dough. What
I wanna know is this: what value of n for you to have stuck with
them?
 
B

Beauregard T. Shagnasty

dorayme said:
OK, you did. But let's go back in time and suppose that the bank with
the IE-only offered you n% more interest on your dough. What I wanna
know is this: what value of n for you to have stuck with them?
Click to expand...

I can't actually say how much more n% it would have taken to keep me. As
it turned out, the new bank (actually a credit union) offered higher
rates of interest on every type of service available. Checking, savings,
CDs, lower on loans and mortgages (though I didn't need any) and far
lower fees, etc.

And the new place was closer to home!

Oh, when the IE-bank asked why I was leaving, I gave the reason, and the
questioner had no clue what I was talking about. I told her to be
absolutely sure to write this down and pass it along to management. This
was about three years ago, and since I no longer have an account, I am
not interested in seeing if they have yet changed their ways.
 
D

dorayme

"Beauregard T. Shagnasty said:
I can't actually say how much more n% it would have taken to keep me. As
it turned out, the new bank (actually a credit union) offered higher
rates of interest on every type of service available.
Click to expand...

So maybe you are on to something here B, if they are clueless
about such things as making their website accessible (which is
damn important thing, you would think), they are likely to be
poor in other areas as well. I have noticed this sort of thing
with films, if they are bad to begin with, they never really get
good. (The converse is not true, either in films or banking). <g>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Help with my responsive home page 2
Help with Visual Lightbox: Scripts 2
SendGrid email issue in responsive Gmail 1
Image shifts to the right when export the page to pdf 4
Having trouble centering contents of td ? 3
Working on mobile css menu with plenty of frustration! 2
Fading effect between play and play-over and pause and pause-over 0
Need help with code on website (noob) 2

Members online

No members online now.
Total: 29 (members: 2, guests: 27)
Robots: 181

Forum statistics

Threads
473,764
Messages
2,569,564
Members
45,039
Latest member
CasimiraVa

Latest Threads

Top