FF bug? Style on able columns

#1

Sanity check.

I'm trying to apply style to a table column by specifying a class on a <col>
tag.
Testcase at http://pages.prodigy.net/chris_beall...l%20style.html.
Firefox seems not to understand the concept at all, i.e. it acts as if no
style was specified.

IE 6 gets the concept and correctly styles the first two columns, but does
not put a border around the third column as requested.

I'll report this as a FF bug unless:
- Someone can show me where I've gone wrong or
- Someone can identify it as a known FF bug.

Thanks,
Chris Beall

#2

Chris Beall wrote:

Quote:

Sanity check.

I'm trying to apply style to a table column by specifying a class on a <col
tag.
Testcase at http://pages.prodigy.net/chris_beall...l%20style.html.
Firefox seems not to understand the concept at all, i.e. it acts as if no
style was specified.

IE 6 gets the concept and correctly styles the first two columns, but does
not put a border around the third column as requested.

I'll report this as a FF bug unless:
- Someone can show me where I've gone wrong or
- Someone can identify it as a known FF bug.

I remember reading about this some time ago. The problem is COL is not
really an element part of the DOM, it is more like a presentational HTML
attribute. Use a DOM inspector and your will not see the COL element on
your page, so it cannot be styled with CSS. Maybe someone else has a
more technically precise explanation.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

#3

In article <2NF6j.5091$fl7.2230 (AT) newssvr22 (DOT) news.prodigy.net>,
"Chris Beall" <Chris_Beall (AT) prodigy (DOT) net> wrote:

Quote:

Sanity check.

I'm trying to apply style to a table column by specifying a class on a <col
tag.
Testcase at http://pages.prodigy.net/chris_beall...l%20style.html.
Firefox seems not to understand the concept at all, i.e. it acts as if no
style was specified.

IE 6 gets the concept and correctly styles the first two columns, but does
not put a border around the third column as requested.

I'll report this as a FF bug unless:
- Someone can show me where I've gone wrong or
- Someone can identify it as a known FF bug.

Thanks,
Chris Beall

I think col should be used in a *colgroup* to be strict. But even
so, there is not reliable browser support for things that you
would think would work well, like background colours. If you try
background on your col you will see it will work in FF but it is
totally without effect in my Safari (Mac and version 2.04).

There are plenty of other ways to achieve most things though.

--
dorayme

#4

On Sat, 8 Dec 2007 16:28:54 -0700, "Chris Beall"
<Chris_Beall (AT) prodigy (DOT) net> wrote:

Quote:

I'm trying to apply style to a table column by specifying a class on a <col
tag.

I had similar results. Since all the class did on the page I
converted was set a smaller font-size (replacing <font ...> tags in
3000+ table rows), FF users just miss out on the author's tiny text.

When I did the research and found <col> I was confused about whether a
class could be applied, and probably wanted to believe what I was
looking for.

Can't find the same links at the moment, but did come this similar
question at <http://www.thescripts.com/forum/thread95908.html> which
pointed to the spec at <http://www.w3.org/TR/CSS2/tables.html#q4>.
Class can be applied, but apparently only for a very limited set of
properties.

Looks like we have a feature request.
--

Charles

#5

On 8 déc, 18:28, "Chris Beall" <Chris_Be... (AT) prodigy (DOT) net> wrote:

Quote:

Sanity check.

I'm trying to apply style to a table column by specifying a class on a <col
tag.
Testcase athttp://pages.prodigy.net/chris_beall/Demo/No%20col%20style.html..
Firefox seems not to understand the concept at all, i.e. it acts as if no
style was specified.

Hello Chris,

font-size, color, text-align can not (should not and must not) be
applied to <col> elements as specified by CSS 2.1, section 17.3. Cells
are descendants of table rows, not columns.

.three {
border: 1px solid black ;
}

Your col class="three" should have a border though... Not sure why it
does not in Firefox 2.0.0.11, Opera 9.50 and Safari 3.0.4.

Quote:

IE 6 gets the concept and correctly styles the first two columns,

It's 2 bugs actually. Only 4 properties can be applied to <col>
elements.

http://www.gtalbot.org/BrowserBugsSe...heritance.html
and also
padding, vertical-align on <col> must be ignored. Ian Hickson has
other testcases on this
eg
http://www.hixie.ch/tests/adhoc/css/box/table/003.html
http://www.hixie.ch/tests/adhoc/css/...lumns/001.html

but does

Quote:

not put a border around the third column as requested.

I'll report this as a FF bug unless:
- Someone can show me where I've gone wrong

Use the adjacent sibling selector if you want to style your columns.
E.g.:
http://css-discuss.incutio.com/?page=StylingColumns
http://yelotofu.com/2007/05/styling-table-columns/
http://www.info.com.ph/~etan/w3panth...ectomania.html
The mystery of why only four properties apply to table columns
http://ln.hixie.ch/?start=1070385285&count=1

MSIE 7 and Firefox 2 support the first-child selector and the adjacent
sibling
selector.

Quote:

or
- Someone can identify it as a known FF bug.

https://bugzilla.mozilla.org/show_bug.cgi?id=399854

By the way, Chris,

http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/

item #87 just in case you're not aware of this.

Regards,

Gérard

#6

On 9 déc, 05:46, GTalbot <newsgr... (AT) gtalbot (DOT) org> wrote:

Quote:

.three {
border: 1px solid black ;

}

Your col class="three" should have a border though... Not sure why it
does not in Firefox 2.0.0.11, Opera 9.50 and Safari 3.0.4.

Got it!
"Border: The various border properties apply to columns only if
'border-collapse' is set to 'collapse' on the table element. In that
case, borders set on columns and column groups are input to the
conflict resolution algorithm that selects the border styles at every
cell edge." CSS 2.1, Section 17.3 Columns
http://www.w3.org/TR/CSS21/tables.html#columns

and

C.2.119 Section 17.6 Borders

"Several popular browsers assume an initial value for 'border-
collapse' of 'separate' rather than 'collapse' or exhibit behavior
that is close to that value, even if they do not actually implement
the CSS table model. 'Separate' is now the initial value."

http://www.w3.org/TR/CSS21/changes.html#q126

and in your code, the table had the default border-collapse: separate.

Regards,

Gérard

#7

"Jonathan N. Little" <lws4art (AT) centralva (DOT) net> wrote

Quote:

Chris Beall wrote:
Sanity check.

I'm trying to apply style to a table column by specifying a class on a
col
tag.
Testcase at
http://pages.prodigy.net/chris_beall...l%20style.html.
Firefox seems not to understand the concept at all, i.e. it acts as if
no
style was specified.

IE 6 gets the concept and correctly styles the first two columns, but
does
not put a border around the third column as requested.

I'll report this as a FF bug unless:
- Someone can show me where I've gone wrong or
- Someone can identify it as a known FF bug.

I remember reading about this some time ago. The problem is COL is not
really an element part of the DOM, it is more like a presentational HTML
attribute. Use a DOM inspector and your will not see the COL element on
your page, so it cannot be styled with CSS. Maybe someone else has a
more technically precise explanation.

Jonathan,

Actually, the FF DOM inspector does show the COL element, but it has no
decendants, which is a first indication of why there are restrictions on
which cell styles it can influence. See the excellent comments below for
more information.

Chris Beall

#8

"dorayme" <doraymeRidThis (AT) optusnet (DOT) com.au> wrote

Quote:

In article <2NF6j.5091$fl7.2230 (AT) newssvr22 (DOT) news.prodigy.net>,
"Chris Beall" <Chris_Beall (AT) prodigy (DOT) net> wrote:

Sanity check.

I'm trying to apply style to a table column by specifying a class on a
col
tag.
Testcase at
http://pages.prodigy.net/chris_beall...l%20style.html.
Firefox seems not to understand the concept at all, i.e. it acts as if
no
style was specified.

IE 6 gets the concept and correctly styles the first two columns, but
does
not put a border around the third column as requested.

I'll report this as a FF bug unless:
- Someone can show me where I've gone wrong or
- Someone can identify it as a known FF bug.

Thanks,
Chris Beall

I think col should be used in a *colgroup* to be strict. But even
so, there is not reliable browser support for things that you
would think would work well, like background colours. If you try
background on your col you will see it will work in FF but it is
totally without effect in my Safari (Mac and version 2.04).

There are plenty of other ways to achieve most things though.

--
dorayme

dorayme,

COLGROUP is optional in many cases, including this one. I did try adding
it, but it had no impact, for the reasons described in GTalbot's post below.

Chris Beall

#9

"BobaBird" <BobaBird (AT) aol (DOT) spam.com.free> wrote

Quote:

On Sat, 8 Dec 2007 16:28:54 -0700, "Chris Beall"
Chris_Beall (AT) prodigy (DOT) net> wrote:

I'm trying to apply style to a table column by specifying a class on a
col
tag.

I had similar results. Since all the class did on the page I
converted was set a smaller font-size (replacing <font ...> tags in
3000+ table rows), FF users just miss out on the author's tiny text.

When I did the research and found <col> I was confused about whether a
class could be applied, and probably wanted to believe what I was
looking for.

Can't find the same links at the moment, but did come this similar
question at <http://www.thescripts.com/forum/thread95908.html> which
pointed to the spec at <http://www.w3.org/TR/CSS2/tables.html#q4>.
Class can be applied, but apparently only for a very limited set of
properties.

Looks like we have a feature request.
--

Charles

Charles,

Exactly my problem; many rows to style and a reluctance to assign a class to
each <td>. See GTalbot's excellent coverage the subject, including Hixie's
analysis of why it is as it is.

Chris Beall

#10

"GTalbot" <newsgroup (AT) gtalbot (DOT) org> wrote

On 8 déc, 18:28, "Chris Beall" <Chris_Be... (AT) prodigy (DOT) net> wrote:

Quote:

Sanity check.

I'm trying to apply style to a table column by specifying a class on a
col
tag.
Testcase
athttp://pages.prodigy.net/chris_beall/Demo/No%20col%20style.html.
Firefox seems not to understand the concept at all, i.e. it acts as if no
style was specified.

Hello Chris,

font-size, color, text-align can not (should not and must not) be
applied to <col> elements as specified by CSS 2.1, section 17.3. Cells
are descendants of table rows, not columns.

..three {
border: 1px solid black ;
}

Your col class="three" should have a border though... Not sure why it
does not in Firefox 2.0.0.11, Opera 9.50 and Safari 3.0.4.

Quote:

IE 6 gets the concept and correctly styles the first two columns,

It's 2 bugs actually. Only 4 properties can be applied to <col>
elements.

http://www.gtalbot.org/BrowserBugsSe...heritance.html
and also
padding, vertical-align on <col> must be ignored. Ian Hickson has
other testcases on this
eg
http://www.hixie.ch/tests/adhoc/css/box/table/003.html
http://www.hixie.ch/tests/adhoc/css/...lumns/001.html

but does

Quote:

not put a border around the third column as requested.

I'll report this as a FF bug unless:
- Someone can show me where I've gone wrong

Use the adjacent sibling selector if you want to style your columns.
E.g.:
http://css-discuss.incutio.com/?page=StylingColumns
http://yelotofu.com/2007/05/styling-table-columns/
http://www.info.com.ph/~etan/w3panth...ectomania.html
The mystery of why only four properties apply to table columns
http://ln.hixie.ch/?start=1070385285&count=1

MSIE 7 and Firefox 2 support the first-child selector and the adjacent
sibling
selector.

Quote:

or
- Someone can identify it as a known FF bug.

https://bugzilla.mozilla.org/show_bug.cgi?id=399854

By the way, Chris,

http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/

item #87 just in case you're not aware of this.

Regards,

Gérard

Gerard,

Thanks for the clear and comprehensive response:

- I was trying to do something that isn't spec'd.
- Adjacent sibling with or without :first-child is the way to go.
- But special styling will be required for rows where colspan > 1 is
used.
- Implementation concerns cause the limitation on column styling (Actually,
I think it's also the DOM concept that each element can have only one
parent, clearly problematic with a table.)
- The Mozilla folks know about the issue and are following the spec.
- You've recorded for posterity my contribution to improving IE 7 in the
area of max-width and <li>. (Their workaround: put the list in a <div> and
put the max-width on that.)

Thanks for all of the above,
Chris Beall