What's the CSS equivalent of <table bordercolor="#ffffff"> ?

[Alan Silver]

Hello,

I am updating some old web pages, and have come across a problem. I have
some tables where the opening tag looks like...

<table border="1" bordercolor="#ffffff">

which gives a nice flat border around the table in IE, and a fairly
unpleasant (IMO) 3D-effect border in Firefox.

I am trying to achieve the same effect as I see in IE, but in CSS
instead of in HTML, but can't reproduce the same border. I tried
creating a class like...

..flatborder {
border: 1px;
border-color: #000000;
border-style: solid;
}

But this gave the same 3D-effect that I had in Firefox.

Is there a way to use CSS to get IE and FF to show the nice flat border
that IE gives with the bordercolor attribute? TIA

--
Alan Silver
(anything added below this line is nothing to do with me)

[Els]

Alan Silver wrote:

I am updating some old web pages, and have come across a problem. I have
some tables where the opening tag looks like...

<table border="1" bordercolor="#ffffff">

which gives a nice flat border around the table in IE, and a fairly
unpleasant (IMO) 3D-effect border in Firefox.

I am trying to achieve the same effect as I see in IE, but in CSS
instead of in HTML, but can't reproduce the same border. I tried
creating a class like...

.flatborder {
border: 1px;
Make that border-width:1px;
border-color: #000000;
border-style: solid;
}

But this gave the same 3D-effect that I had in Firefox.
Does it still do that with border-width instead of border?
Is there a way to use CSS to get IE and FF to show the nice flat border
that IE gives with the bordercolor attribute? TIA

I've never seen 3D borders when stating border-style:solid;

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: King Crimson - Lizard

[Jukka K. Korpela]

Alan Silver <al*********@nospam.thanx.invalid> wrote:

.flatborder {

That applies to an element in class "flatborder". You have not
specified any markup that contains any class attribute.

The odds are that you are applying something to a <table> element when
you would in fact need to apply it to table cells as well.

Hint: specify the URL. It saves a lot of everyone's time, and you know,
everyone is busy.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[Alan Silver]

>> .flatborder {

That applies to an element in class "flatborder". You have not
specified any markup that contains any class attribute.
Nope, I showed the HTML that I had without any CSS. This class was an
example of the sort of thing I wanted to do. I assumed it was fairly
obvious that it was to apply to the <table> tag as that was the only tag
I showed.

Sorry if I wasn't clear.
The odds are that you are applying something to a <table> element when
you would in fact need to apply it to table cells as well.
Well, if I understand correctly, the border is part of the table, rather
than the cell. Going on the way HTML attributes work, "border" and
"bordercolor" (now obsolete) both went on the <table> tag to produce the
effect I described.
Hint: specify the URL. It saves a lot of everyone's time, and you know,
everyone is busy.

I know, that's why the post was short and (hopefully) to the point. I
don't have an URL for this site, and as the HTML/CSS in question was so
short, I didn't see any need to create a sample page and find somewhere
free to upload it just for this.

Obviously I would provide an URL for something more complex.

Ta ra

--
Alan Silver
(anything added below this line is nothing to do with me)

[Alan Silver]

<snip>

.flatborder {
border: 1px;

Make that border-width:1px;

Aha, that made a difference!! Thanks for spotting that.

border-color: #000000;
border-style: solid;
}

But this gave the same 3D-effect that I had in Firefox.

Does it still do that with border-width instead of border?

Nope, it gives a nice flat border like I wanted.

The only thing is that this only gives a border around the extremities
of the table. Specifying the bordercolor attribute on the <table> tag
put the border around each cell as well.

I tried adding the following three lines to the class that is used to
style each table cell...

border-width:2px;
border-color: #63B7E5;
border-style: solid;

but it didn't do anything. Any idea how to get the inner lines showing
as well?

Is there a way to use CSS to get IE and FF to show the nice flat border
that IE gives with the bordercolor attribute? TIA

I've never seen 3D borders when stating border-style:solid;

Try the HTML I originally posted. In FF (at least, in version 1.5), the
table has a border that looks to me like it's supposed to be 3D. If you
look closely, the inner and outer edges of the border are different
colours. At any rate, it isn't a simple flat line like IE shows.

Thanks for the reply. Any further help appreciated.

--
Alan Silver
(anything added below this line is nothing to do with me)

[Els]

Alan Silver wrote:

[border on table using css]

.flatborder {
border: 1px;
Make that border-width:1px;

Aha, that made a difference!! Thanks for spotting that.

[snip]
The only thing is that this only gives a border around the extremities
of the table. Specifying the bordercolor attribute on the <table> tag
put the border around each cell as well.

I tried adding the following three lines to the class that is used to
style each table cell...
How? You didn't add 'class="classname"' to each and every cell? No
need :-)

..flatborder td{
border:2px solid #63B7E5;
}

Is there a way to use CSS to get IE and FF to show the nice flat border
that IE gives with the bordercolor attribute? TIA

I've never seen 3D borders when stating border-style:solid;

Try the HTML I originally posted. In FF (at least, in version 1.5), the
table has a border that looks to me like it's supposed to be 3D.

That was with faulty CSS, right? ;-)
It might well be that the default border style in FF is 'outset'
instead of 'solid'. With correctly written CSS and border-style:solid;
FF won't give that effect afaik.
Thanks for the reply. Any further help appreciated.

You're welcome :-)

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: King Crimson - Fracture

[Jukka K. Korpela]

Alan Silver <al*********@nospam.thanx.invalid> wrote:

I didn't see any need to create a sample page and find somewhere
free to upload it just for this.

Too bad. You are not helping us to help you.

And your understanding of borders in HTML vs. CSS _is_ apparently
wrong.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[Alan Silver]

>And your understanding of borders in HTML vs. CSS _is_ apparently

wrong.

That's why I came here, to be educated by those who know, and are
prepared to help. I have had help, and am now better educated. There's
still plenty I need to learn, but I am further on than I was before.

--
Alan Silver
(anything added below this line is nothing to do with me)

[Alan Silver]

<snip>

I tried adding the following three lines to the class that is used to
style each table cell...

How? You didn't add 'class="classname"' to each and every cell?

No, I already had a class on every cell to set the background colour. I
just added those lines to the one class definition.

<snip>

Try the HTML I originally posted. In FF (at least, in version 1.5), the
table has a border that looks to me like it's supposed to be 3D.

That was with faulty CSS, right? ;-)

No, that was without any CSS. The original HTML (typed from memory as I
can't be bothered checking what I really typed) looked like...

<table border="1" bordercolor="#000000">

Anyway, it seems to work now, except for the problem I mentioned with
the inner cell borders.

Ta ra

--
Alan Silver
(anything added below this line is nothing to do with me)

[Els]

Alan Silver wrote:

<snip>

I tried adding the following three lines to the class that is used to
style each table cell...
How? You didn't add 'class="classname"' to each and every cell?

No, I already had a class on every cell to set the background colour. I
just added those lines to the one class definition.

Okay, so.. why aren't you having borders on the cells yet then?
td.class{
border:2px solid #63B7E5;
}
should just work.
<snip>

Try the HTML I originally posted. In FF (at least, in version 1.5), the
table has a border that looks to me like it's supposed to be 3D.
That was with faulty CSS, right? ;-)

No, that was without any CSS. The original HTML (typed from memory as I
can't be bothered checking what I really typed) looked like...

<table border="1" bordercolor="#000000">

Understood.
I've never used that type of code myself, so that would explain why I
never saw it make 3D borders in FF ;-)
Anyway, it seems to work now, except for the problem I mentioned with
the inner cell borders.

Can you show exactly what styles you used for the cells, including the
selector and class, as well as a snippet from the HTML, including
table, tr and td?

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Now playing: King Crimson - Vrooom Vrooom

[Alan Silver]

>> Anyway, it seems to work now, except for the problem I mentioned with

the inner cell borders.

Can you show exactly what styles you used for the cells, including the
selector and class, as well as a snippet from the HTML, including table, tr
and td?

OK, here is a complete page showing the problem. I realised whilst
making it that I am still using cellpadding and cellspacing on the
<table> tag. I'm not sure what the CSS equivalents of these are. I don't
think it affects the issue, but if you can tell me what they are it
would help shift more presentation out of the HTML and into the CSS.

Here is the code. Thanks again for all the help.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
..DapTable {
width: 100%;
border-width:2px;
border-color: #63B7E5;
border-style: solid;

}
..tableCell {
background-color: #eeeeff;
text-align: left;
vertical-align: top;
border: 2px solid #63B7E5;
}
</style>
</head>

<body>
<table cellpadding="6" cellspacing="0" class="DapTable">
<tr class="tableCell">
<td>this is some stuff</td>
<td>hello world</td>
</tr>
<tr class="tableCell">
<td>I was here</td>
<td>some pig!!</td>
</tr>
</table>
</body>
</html>

--
Alan Silver
(anything added below this line is nothing to do with me)

[Els]

Alan Silver wrote:

OK, here is a complete page showing the problem. I realised whilst
making it that I am still using cellpadding and cellspacing on the
<table> tag. I'm not sure what the CSS equivalents of these are.
cellpadding:
td{
padding:5px;
}

cellspacing:
table{
border-collapse:collapse;
}
Here is the code. Thanks again for all the help.
[snip] .tableCell { [snip styles] }
[snip]
<tr class="tableCell">
<td>this is some stuff</td>

As you can see, you set the class on the TR, not the TD.
A small change to your CSS makes up for that:
..tableCell td{
[styles]
}

".tableCell td" is a selector for a td that is a descendent of an
element with class 'tableCell'.
You could also write ".DapTable td", since you want the style applied
to all the TDs in that table.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

[Yucky Korpulent]

And you thought that you could ask a question here and receive patient
understanding and helpful guidance rather than ridicule about your
ignorance? That, my naive friend, is _not_ the way it works in
Finland.

Yucky, http://www.yuckykorpulent.com

[Jim Moe]

Alan Silver wrote:

The odds are that you are applying something to a <table> element when
you would in fact need to apply it to table cells as well.

Well, if I understand correctly, the border is part of the table, rather
than the cell. Going on the way HTML attributes work, "border" and
"bordercolor" (now obsolete) both went on the <table> tag to produce the
effect I described.

In the tag form the border[color] is applied to both the table and its
cells. In CSS table borders and table cell borders are separate and must
be specified individually; this is actually a Good Thing.

Hint: specify the URL. It saves a lot of everyone's time, and you know,
everyone is busy.

I know, that's why the post was short and (hopefully) to the point. I
don't have an URL for this site, and as the HTML/CSS in question was so
short, I didn't see any need to create a sample page and find somewhere
free to upload it just for this.

It's easier to just provide an URL to a test case. It saves all this
blather about the scope of the problem.
In general there is more to a question than you think and having to
extract relevant info piecemeal is boring and annoying especially when you
suffer from a misunderstanding of CSS or HTML. A test case would provide
the info we need all in one package.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[Alan Silver]

>And you thought that you could ask a question here and receive patient

understanding and helpful guidance rather than ridicule about your
ignorance? That, my naive friend, is _not_ the way it works in
Finland.

Good job I don't live in Finland eh?

--
Alan Silver
(anything added below this line is nothing to do with me)

[Alan Silver]

>> OK, here is a complete page showing the problem. I realised whilst

making it that I am still using cellpadding and cellspacing on the
<table> tag. I'm not sure what the CSS equivalents of these are.

<snip>

That's fantastic, thanks very much.

--
Alan Silver
(anything added below this line is nothing to do with me)

[Alan Silver]

>In general there is more to a question than you think and having to

extract relevant info piecemeal is boring and annoying especially when
you suffer from a misunderstanding of CSS or HTML. A test case would
provide the info we need all in one package.

Point taken. In this case it would have been better to have provided a
full sample of the code in question. It seemed such a simple issue that
I didn't see the point in making the post longer than needed.

Thanks for the clarification.

--
Alan Silver
(anything added below this line is nothing to do with me)

[Jukka K. Korpela]

Alan Silver <al*********@nospam.thanx.invalid> wrote:

And you thought that you could ask a question here and receive
patient understanding and helpful guidance rather than ridicule
about your ignorance? That, my naive friend, is _not_ the way it
works in Finland.

Good job I don't live in Finland eh?

You have the privilege of babbling pointlessly, and getting ignored in
future. You already admitted you should have posted a URL, so praising
a troll was foolish. Feed the trolls, get treated like one. Hope this
helps. HAND.

(I would have sent this privately only, but you use a fake From field.)

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[Yucky Korpulent]

Jukka K. Korpela wrote:

You have the privilege of babbling pointlessly, and getting ignored in
future. You already admitted you should have posted a URL, so praising
a troll was foolish. Feed the trolls, get treated like one. Hope this
helps. HAND.

Now, now, Jukka... Mine is not a mission of trolldom, but rather, one
of rescue. I envision a Usenet free from the tyranny of conceited
buffoons like yourself whose first reaction is to bash newbies about
their misspellings, their misuse of technical jargon and their
nonconformity to whatever rules and regulations you and your ilk have
decreed to be the unquestionable law of Usenet.

We can do better!!!! We must do better. We must defeat bullies the
same way we defeat trolls---by ignoring them. Preface all questions
with (No Jukka!) to indicate arrogant responses from self-satisfied
clowns are not acceptable. In time, "NJ" will become a standard
tagline across Usenet, a constant reminder of how far we have come
since the days when "Clearly you have no idea what you are doing. Try
reading an introductory book on HTML" was once a common response to
well-intentioned questions. I HAVE A DREAM!!!!!!!!!!!!!!

Yucky, http://yuckykorpulent.com

[Alan Silver]

>>>And you thought that you could ask a question here and receive

patient understanding and helpful guidance rather than ridicule
about your ignorance? That, my naive friend, is _not_ the way it
works in Finland.
Good job I don't live in Finland eh?

You have the privilege of babbling pointlessly,

We live in a democratic society, and I believe that is one of the
privileges ;-)
and getting ignored in
future. You already admitted you should have posted a URL, so praising
a troll was foolish. Feed the trolls, get treated like one. Hope this
helps. HAND.
I read his comment as mild humour, and replied the same way.
(I would have sent this privately only, but you use a fake From field.)

Correct. I'm fed up of spam.

--
Alan Silver
(anything added below this line is nothing to do with me)

[Alan Silver]

Hello again,

Just when you thought you'd got rid of me eh? I'm back with another dumb
question about tables.

Thanks to the help I got here, I now have my tables working fine with
styles instead of inline HTML attributes. However, I've come across a
variation of the problem in that I have a nested table, and I can't
remove the styles from this!! I even have a URL this time...

http://www.kidsinaction.org.uk/Tables.html

If you look in the bottom-right cell of the main table, you see another
table. I want to remove the borders from this one. I tried this by
defining a class like this...

..NoBorders {
border-width: 0px;
border-style: none;
}

and applying it. I tried the table tag, the tr, and the td (all three in
the sample shown), but it didn't do anything. It still has the blue
borders.

I'm sure I'm doing something really stupid here. Please explain!!

TIA

--
Alan Silver
(anything added below this line is nothing to do with me)

[Mark Parnell]

Deciding to do something for the good of humanity, Alan Silver
<al*********@nospam.thanx.invalid> declared in
comp.infosystems.www.authoring.stylesheets:

http://www.kidsinaction.org.uk/Tables.html

If you look in the bottom-right cell of the main table, you see another
table. I want to remove the borders from this one. I tried this by
defining a class like this...

Nested tables are very rarely necessary, but assuming that it is
actually semantically correct...

table.NoBorders td { border: none; }

--
Mark Parnell

I give up:
http://blinkynet.net/comp/uip5.html

[Alan Silver]

>Deciding to do something for the good of humanity,

I'd like to think it helps humanity, but I doubt my incoherent waffling
is going to help many!!

Alan Silver
<al*********@nospam.thanx.invalid> declared in
comp.infosystems.www.authoring.stylesheets:

http://www.kidsinaction.org.uk/Tables.html

If you look in the bottom-right cell of the main table, you see another
table. I want to remove the borders from this one. I tried this by
defining a class like this...
Nested tables are very rarely necessary, but assuming that it is
actually semantically correct...

You care correct that they are rarely necessary, but in this case it
seems they are. I appreciate your point though. I'm not using tables for
layout!!
table.NoBorders td { border: none; }

Thanks, that worked fine.

--
Alan Silver
(anything added below this line is nothing to do with me)