CSS: how to draw an inner border?

[Nicole]

Hi User,


This html-table:

<table border=1 summary="grrrr">
....

would draw me a table with a grid: Every cell will have a visible frame.

====================

in CSS I tried it like this:

table.navigation1 {boder-style: solid; border-width=1; border-color:"#ffffff";}


and now? Now there is the border drawn AROUND my table and the INNER-grid around my cells is NOT VISIBLE any more.

===================

Can anybody tell me how to write the - html-"border=1" within a table -

for CSS?


Thank you for hints!


Nicole

 

[Jukka K. Korpela]

This html-table:

<table border=1 summary="grrrr">
...

would draw me a table with a grid: Every cell will have a visible
frame.

Yes, and additionally there is a border around the entire table.

in CSS I tried it like this:

table.navigation1 {boder-style: solid; border-width=1;
border-color:"#ffffff";}

That was all wrong, but we cannot tell whether your actual code is that
badly in error or you made a copying error - since you did not include a
URL.

and now? Now there is the border drawn AROUND my table and the
INNER-grid around my cells is NOT VISIBLE any more.

Works as defined.

Can anybody tell me how to write the - html-"border=1" within a
table -

To draw borders around cells, you... er... emm... well... set borders for
cell elements, e.g.
th, td { border: solid 1px #fff; }

 

[Jonathan N. Little]

Hi User,


This html-table:

<table border=1 summary="grrrr">
...

would draw me a table with a grid: Every cell will have a visible frame.

====================

in CSS I tried it like this:

table.navigation1 {boder-style: solid; border-width=1; border-color:"#ffffff";}


and now? Now there is the border drawn AROUND my table and the INNER-grid around my cells is NOT VISIBLE any more.

===================

Can anybody tell me how to write the - html-"border=1" within a table -

for CSS?


Thank you for hints!

Yes put borders on the cell elements...

table.navigation1 { border: 1px solid #ffffff; }
table.navigation1 td { border: 1px solid #ffffff; }
table.navigation1 th { border: 1px solid #ffffff; }

Or more compact if all will be the same.

table.navigation1, table.navigation1 td, table.navigation1 th {
border: 1px solid #ffffff;
}

 

[Nicole]

Jonathan N. Little wrote:

table.navigation1 { border: 1px solid #ffffff; }
table.navigation1 td { border: 1px solid #ffffff; }
table.navigation1 th { border: 1px solid #ffffff; }

Or more compact if all will be the same.

table.navigation1, table.navigation1 td, table.navigation1 th {
border: 1px solid #ffffff;
}

Thank you for the answer.

I tried to write into CSS:
..navi1
{width="100%"; border-spacing:0pt; border-style:solid; border-width=2; }
..navi1 td { border: 1px solid #ffffff; }

and into my html:
<table class="navi1" ...>


It does not work the same as "border=1" in the table-tag.
What did I do wrong?



@Jukka: thank you for your answer.
I know, that I can connect it to "td" - but neither I want to change all my site's <td>s, nor do I want to write this class to every td in my navi1-table.
How can I avoid both?

(And no, I do not want to define 5 areas a side, which would work as well. I just want to format my navigation-tables each by one scratch.)


Thanks,
Nicole

 

[Jukka K. Korpela]

I tried to write into CSS:
.navi1
{width="100%"; border-spacing:0pt; border-style:solid;
border-width=2; }

Then stop trying until you have read an introduction to an elementary
tutorial on the basics of CSS. Your CSS syntax is all wrong.

I know, that I can connect it to "td" - but neither I want to change
all my site's <td>s, nor do I want to write this class to every td in
my navi1-table.
How can I avoid both?

You're not making sense. When you have learned CSS, don't forget to post the
URL when you ask for help.

 

[Nicole]

Jukka K. Korpela wrote:

Then stop trying until you have read an introduction to an elementary tutorial on the basics of CSS. Your CSS syntax is all wrong.

That it is wrong, I know by myself.

If you are that good at CSS, it would be easy for you to correct two single lines? Or are you just able to say things, everybody knows?


Nicole

 

[Jukka K. Korpela]

If you are that good at CSS,

Maybe I am, maybe I am not, but you have no clue.

it would be easy for you to correct two
single lines?

No, it would not, since you still refused to give a URL that would show what
you are doing.

Or are you just able to say things, everybody knows?

Please keep using your forged "From" field (the same garbage you have now)
until you have a clue. Thank you in advance.

 

[Jonathan N. Little]

Jukka K. Korpela wrote:

Ok, I'll have pity on you. Jukka subscribes to the philosophy "Give a
man a fish and he will not be hungry today, teach a man to fish and he
will not be hungry tomorrow". He is correct, your syntax is wrong and
you need BASIC understanding first. Try the tutorials at htmldog.com

But I will also point out some of your errors and why your snippet is
NOT adequate to offer you a "fix"
^^ ^ ^^
[1][2] [3] ^^
[1][4]

REMARKS:
[1] '=' is not the proper character to separate property value pairs in
CSS, it is the ':' colon
[2] Don't quote numeric length values or keywords and 100% means 100% of
the container and only really works when you set a discrete value on the
container, did you? We don't know because you only posted a snippet and
not a URL
[3] Although technically 0pt = 0 = 0px, you should not use pt (points)
for webpage display, points are used for print media.
[4] A unit is required on length values with just a few exceptions, so
your border is "2 what"? Pixels, Feet, Bozos?

That it is wrong, I know by myself.

If you are that good at CSS, it would be easy for you to correct two single lines? Or are you just able to say things, everybody knows?

So Jukka is correct that you really cannot give you an answer, because
we neither have enough information nor do you appear exhibit the skill
level at this time to understand the answer. Get some basics down first.
Then supply a URL if you still have problems.

 

[Nicole]

Jonathan N. Little wrote:


thank you for your hints to CSS in general.
I corrected them in the meanwhile.
They were more copy errors than CSS errors.
I applogize for my untidy posting.

"read a book about CSS" - well, this will not help me.
I studied some references about, but the question is really hard:

How can I do a table's class within CSS in that way, that the TD and the TR are affected by it?

Here come the urls (be aware that they are neiter published nor error-checked):

The BORDERS shall look like here (best: Firefox):
http://www.tigertradingclub.com.serv12.server-center.de/kurse/index.shtml
They are done from html, I want to do them by CSS in excactly the same look. The shall not just be OUTLINES, but INNER grids as well.
For this it will be necessary to use table-"border" as well as table-"cellspacing".
Border draws the line around the single cells and cellspacing draws the thin white quarter lines between the "buttons".


The COLORS (the 3 types of gray) shall look like here with the IE(!):
http://www.tigertradingclub.com.serv12.server-center.de/metastock_bestellen..shtml

This looks fine in the Internet Explorer, but rather nasty within Firefox and Opera: The 3 grey tones are not to see, but the general background image instead.

My reference book says, that all 3 browsers shall know "background-color", so probably theres is a way to do it for my td or tr as well.


To say it in other words and plainly spoken:

I do not want just a class, but an "object" of it - in CSS.
It shall be a class including: table + tr + td,.... referenced by one single word in the table-tag of my html-table.

Hope you or anybody can help me more than some clueless guys around (you know whom I mean): ;-)



Nicole

 

[dorayme]

Please keep using your forged "From" field (the same garbage you have now)
until you have a clue. Thank you in advance.

On a Mac there is a thing called a text clipping: wherever you see a bit
of text, you can select it and grab it with a mouse and dump it onto the
desktop or in any folder. It gets named after the first few words of the
text and gets a particular extension. This one would get:

Please keep using your forge.textClipping

You can compact afterwards to whatever. For example:

forCheekyClueless.textClipping

Then, when the need arises to use those words, you simply grab the
clipping, a named icon thing and drop it into the post.

I am just saying... I hope you do not feel the need to type it every
time. <g>

 

[Jonathan N. Little]

Jonathan N. Little wrote:


thank you for your hints to CSS in general.
I corrected them in the meanwhile.
They were more copy errors than CSS errors.
I applogize for my untidy posting.

"read a book about CSS" - well, this will not help me.
I studied some references about, but the question is really hard:

How can I do a table's class within CSS in that way, that the TD and the TR are affected by it?

Here come the urls (be aware that they are neiter published nor error-checked):

The BORDERS shall look like here (best: Firefox):
http://www.tigertradingclub.com.serv12.server-center.de/kurse/index.shtml
They are done from html, I want to do them by CSS in excactly the same look. The shall not just be OUTLINES, but INNER grids as well.
For this it will be necessary to use table-"border" as well as table-"cellspacing".
Border draws the line around the single cells and cellspacing draws the thin white quarter lines between the "buttons".


The COLORS (the 3 types of gray) shall look like here with the IE(!):
http://www.tigertradingclub.com.serv12.server-center.de/metastock_bestellen.shtml

This looks fine in the Internet Explorer, but rather nasty within Firefox and Opera: The 3 grey tones are not to see, but the general background image instead.

My reference book says, that all 3 browsers shall know "background-color", so probably theres is a way to do it for my td or tr as well.


To say it in other words and plainly spoken:

I do not want just a class, but an "object" of it - in CSS.
It shall be a class including: table + tr + td,.... referenced by one single word in the table-tag of my html-table.

Hope you or anybody can help me more than some clueless guys around (you know whom I mean): ;-)

Well to simulate what you did in the first URL with CSS, set the cell
background to white and then for links to make those cells gray, either
make a call for those, or as in my example set background on the A
elements with TD and display block so they fill the table cell.

For the thick and thin table cell spacing, there is a "border-spacing"
spacing property, BUT ol' IE doesn't support it. If you want IE support
requires the HTML attribute "cellspacing"...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">

<title>template</title>

<style type="text/css">
body { color: #000; background-color: #fc9; font-family: sans-serif; }

table {
color: #000; background-color: #eee;
border: 1px outset #fff; width: 100%;
text-align: center;
font-weight: bold;
}
td { border: 1px inset #fff; background-color: #fff; }

/* color link cells within table cells */
td a {
color: #f60; background-color: #ddd; display: block; padding: 5px;
}

table.thin { border-spacing: 1px; }
table.thick { border-spacing: 8px; }

</style>

</head>
<body>
<table class="thin">
<tr>
<td><a href="#">Thin</a></td>
<td>Cell</td><td><a href="#">Sample</a></td>
</tr>
</table>

<table class="thick">
<tr>
<td>Thick</td>
<td><a href="#">Cell</a></td>
<td><a href="#">Sample</a></td>
</tr>
</table>
</body>
</html>

 

[Nicole]

Jonathan N. Little wrote:



Thank you for the hint with "border-spacing".

td { border: 1px inset #fff; background-color: #fff; }

The point is:
This CSS line would change ALL the <td>s of my site.

I want to say by CSS:
"Use this very td-form JUST for the table of my class navi1."

As said: I want to make with CSS-table-class the same things, which I do from the table-tag in html.


Nicole

 

[Jonathan N. Little]

Jonathan N. Little wrote:



Thank you for the hint with "border-spacing".





The point is:
This CSS line would change ALL the <td>s of my site.

I want to say by CSS:
"Use this very td-form JUST for the table of my class navi1."

As said: I want to make with CSS-table-class the same things, which I do from the table-tag in html.

/* only for TDs that are descendants fpr table with call "navi1 */

table.navi1 td { border: 1px inset #fff; background-color: #fff; }

try looking at:

http://www.w3.org/TR/CSS21/selector.html

 

[John Hosking]

/* only for TDs that are descendants fpr table with call "navi1 */

table.navi1 td { border: 1px inset #fff; background-color: #fff; }

try looking at:

http://www.w3.org/TR/CSS21/selector.html

And/or http://css.maxdesign.com.au/selectutorial/ with a special focus
on the selectors (about which there is a whole section).

 

[Nicole]

Jonathan N. Little wrote:

and John:

Thank you for your links!
They look very interesting and well keep my busy for a while.



@Ben:
width "auto" would cause this:

e.g.
My first menue (=first table) has the "buttons": you, me, dannyMcGee
the seond line (=second table) has the "bottons": Jonathan, John, Ben, Nicole

The 2 menue tables would not be a compact box, but the second box would be wider. Interesting effect, but I do not want it´.

'width: 100%' makes both menue tables fill the browers window of my guest and be the same size.

"Width" is known better than "collapse".


Nicole