Help | Site Map
Connecting Tech Pros Worldwide
 
 
LinkBack Thread Tools
  #1  
Old July 21st, 2005, 12:54 AM
Philip Herlihy
Guest
 
Posts: n/a
Default Unable to style tables by <col> and descendant class

If I'm reading my reference books correctly, I should be able to pick out
cells in a table by combining a <col> selector with a class selector, like
this:
col#thisid td.thisclass {color: red; }
... but it doesn't work. I can get the unadorned <col> selector to work in
IE6 and Opera (not Dreamweaver 2004):
col#thiscol {color: red; }
... but when I add a descendent selector it stops working. I'd be grateful
for advice or comments.

Example here:
http://philipherlihy.members.beeb.ne...-selectors.htm

--
####################
## PH, London
####################


  #2  
Old July 21st, 2005, 12:54 AM
Mark Tranchant
Guest
 
Posts: n/a
Default Re: Unable to style tables by <col> and descendant class

Philip Herlihy wrote:[color=blue]
> If I'm reading my reference books correctly, I should be able to pick out
> cells in a table by combining a <col> selector with a class selector, like
> this:
> col#thisid td.thisclass {color: red; }
> .. but it doesn't work. I can get the unadorned <col> selector to work in
> IE6 and Opera (not Dreamweaver 2004):
> col#thiscol {color: red; }
> .. but when I add a descendent selector it stops working. I'd be grateful
> for advice or comments.[/color]

http://www.w3.org/TR/CSS21/tables.html#q4 may help explain this.

--
Mark.
http://tranchant.plus.com/
  #3  
Old July 21st, 2005, 12:54 AM
Philip Herlihy
Guest
 
Posts: n/a
Default Re: Unable to style tables by <col> and descendant class

"Mark Tranchant" <mark@tranchant.plus.com> wrote in message
news:415d613d$0$42244$ed2e19e4@ptn-nntp-reader04.plus.net...[color=blue]
> Philip Herlihy wrote:[color=green]
> > If I'm reading my reference books correctly, I should be able to pick[/color][/color]
out[color=blue][color=green]
> > cells in a table by combining a <col> selector with a class selector,[/color][/color]
like[color=blue][color=green]
> > this:
> > col#thisid td.thisclass {color: red; }
> > .. but it doesn't work. I can get the unadorned <col> selector to work[/color][/color]
in[color=blue][color=green]
> > IE6 and Opera (not Dreamweaver 2004):
> > col#thiscol {color: red; }
> > .. but when I add a descendent selector it stops working. I'd be[/color][/color]
grateful[color=blue][color=green]
> > for advice or comments.[/color]
>
> http://www.w3.org/TR/CSS21/tables.html#q4 may help explain this.[/color]


Thanks, Mark - I've studied that reference (and learned something). I'm not
sure that's it, though. When I tried colouring an entire column using a
<col> selector it worked in IE6 and Opera. It was when I added the
descendant <td> class selector then it didn't. If I understand things
correctly (?) then a descendant selector combination (in my example:
col#col2 td.special) picks out the child element only - in this case the
<td> . That should be on the top of the layer model and so the settings of
rows, rowgroups, etc shouldn't matter.

I'm sorry to say I've now spotted mistakes in my original example. I've
corrected these (muddled id and class names) and added a <col>-based
selector which turns text in column 3 pink. That shows the single col-based
selector is working, but the double "col with td.class" one still isn't.

My workaround is to add class names to every cell in a large table, which
makes me wince...
--
####################
## PH, London
####################


  #4  
Old July 21st, 2005, 12:54 AM
Brian
Guest
 
Posts: n/a
Default Re: Unable to style tables by <col> and descendant class

Mark Tranchant wrote:[color=blue]
> Philip Herlihy wrote:
>[color=green]
>> If I'm reading my reference books correctly, I should be able to
>> pick out cells in a table by combining a <col> selector with a
>> class selector, like this:
>> col#thisid td.thisclass {color: red; }
>> .. but it doesn't work.[/color]
>
> http://www.w3.org/TR/CSS21/tables.html#q4 may help explain this.[/color]

Have a look, too, at this:

http://ln.hixie.ch/?start=1070385285&count=1

--
Brian (remove "invalid" to email me)
http://www.tsmchughs.com/
  #5  
Old July 21st, 2005, 12:54 AM
Michael Fesser
Guest
 
Posts: n/a
Default Re: Unable to style tables by <col> and descendant class

.oO(Philip Herlihy)
[color=blue]
>"Mark Tranchant" <mark@tranchant.plus.com> wrote[color=green]
>>
>> http://www.w3.org/TR/CSS21/tables.html#q4 may help explain this.[/color]
>
>Thanks, Mark - I've studied that reference (and learned something). I'm not
>sure that's it, though. When I tried colouring an entire column using a
><col> selector it worked in IE6 and Opera. It was when I added the
>descendant <td> class selector then it didn't. If I understand things
>correctly (?) then a descendant selector combination (in my example:
>col#col2 td.special) picks out the child element only[/color]

Yes, but ...
[color=blue]
>- in this case the
><td> .[/color]

.... td-elements are _no_ children of col-elements, in fact col-elements
are empty. Cells are children of rows, so you can't select cells in a
column.

Micha
  #6  
Old July 21st, 2005, 12:54 AM
Philip Herlihy
Guest
 
Posts: n/a
Default Re: Unable to style tables by <col> and descendant class

"Brian" <usenet3@julietremblay.com.invalid> wrote in message
news:mdg7d.653219$Gx4.88682@bgtnsc04-news.ops.worldnet.att.net...[color=blue]
> Mark Tranchant wrote:[color=green]
> > Philip Herlihy wrote:
> >[color=darkred]
> >> If I'm reading my reference books correctly, I should be able to
> >> pick out cells in a table by combining a <col> selector with a
> >> class selector, like this:
> >> col#thisid td.thisclass {color: red; }
> >> .. but it doesn't work.[/color]
> >
> > http://www.w3.org/TR/CSS21/tables.html#q4 may help explain this.[/color]
>
> Have a look, too, at this:
>
> http://ln.hixie.ch/?start=1070385285&count=1
>[/color]


Interesting article! (I must say as I've struggled to learn to use CSS
reliably I've grown an appreciation of just how complex and sophisticated a
browser is.)

I take two things from this new article:
1) As what I'm actually after is "background-color" then it ought to work
(have changed my example again):
http://philipherlihy.members.beeb.ne...-selectors.htm
2) Perhaps we're expecting too much of browsers...


--
####################
## PH, London
####################


  #7  
Old July 21st, 2005, 12:54 AM
Steve Pugh
Guest
 
Posts: n/a
Default Re: Unable to style tables by <col> and descendant class

On Fri, 1 Oct 2004 20:30:18 +0000 (UTC), "Philip Herlihy"
<foof8501@herlihy.eu.veil.com> wrote:[color=blue]
>"Brian" <usenet3@julietremblay.com.invalid> wrote in message
>news:mdg7d.653219$Gx4.88682@bgtnsc04-news.ops.worldnet.att.net...[color=green]
>> Mark Tranchant wrote:[color=darkred]
>> > Philip Herlihy wrote:
>> >
>> >> If I'm reading my reference books correctly, I should be able to
>> >> pick out cells in a table by combining a <col> selector with a
>> >> class selector, like this:
>> >> col#thisid td.thisclass {color: red; }
>> >> .. but it doesn't work.
>> >
>> > http://www.w3.org/TR/CSS21/tables.html#q4 may help explain this.[/color]
>>
>> Have a look, too, at this:
>>
>> http://ln.hixie.ch/?start=1070385285&count=1
>>[/color]
>
>Interesting article! (I must say as I've struggled to learn to use CSS
>reliably I've grown an appreciation of just how complex and sophisticated a
>browser is.)
>
>I take two things from this new article:
>1) As what I'm actually after is "background-color" then it ought to work[/color]

If you apply it as a style to the col element, so your #col3 {...}
style should be, and indeed is, applied.
[color=blue]
>(have changed my example again):
>http://philipherlihy.members.beeb.ne...-selectors.htm[/color]

No it should not work.
#col2 td.special {...}
is a match for all <td> elements with class=special that are
descendents of the element with id=col2

But id=col2 is a <col> element and <td> elements are NEVER descendents
of col elements. As detailed in the W3C page referenced above.

So your selector doesn't match anything. Hence there is nowhere to
apply your style, and so the browsers are getting it perfectly
correct.

Steve

  #8  
Old July 21st, 2005, 12:54 AM
Philip Herlihy
Guest
 
Posts: n/a
Default Re: Unable to style tables by <col> and descendant class

"Steve Pugh" <steve@pugh.net> wrote in message
news:h9jrl05p0icp439r7civbd0n42kd4re4nr@4ax.com...[color=blue]
> On Fri, 1 Oct 2004 20:30:18 +0000 (UTC), "Philip Herlihy"
> <foof8501@herlihy.eu.veil.com> wrote:[color=green]
> >"Brian" <usenet3@julietremblay.com.invalid> wrote in message
> >news:mdg7d.653219$Gx4.88682@bgtnsc04-news.ops.worldnet.att.net...[color=darkred]
> >> Mark Tranchant wrote:
> >> > Philip Herlihy wrote:
> >> >
> >> >> If I'm reading my reference books correctly, I should be able to
> >> >> pick out cells in a table by combining a <col> selector with a
> >> >> class selector, like this:
> >> >> col#thisid td.thisclass {color: red; }
> >> >> .. but it doesn't work.
> >> >
> >> > http://www.w3.org/TR/CSS21/tables.html#q4 may help explain this.
> >>
> >> Have a look, too, at this:
> >>
> >> http://ln.hixie.ch/?start=1070385285&count=1
> >>[/color][/color][/color]
....[color=blue][color=green]
> >1) As what I'm actually after is "background-color" then it ought to[/color][/color]
work[color=blue]
>
> If you apply it as a style to the col element, so your #col3 {...}
> style should be, and indeed is, applied.
>[/color]
....[color=blue]
> #col2 td.special {...}
> is a match for all <td> elements with class=special that are
> descendents of the element with id=col2
>
> But id=col2 is a <col> element and <td> elements are NEVER descendents
> of col elements. As detailed in the W3C page referenced above.
>
> So your selector doesn't match anything. Hence there is nowhere to
> apply your style, and so the browsers are getting it perfectly
> correct.[/color]

Thanks, Steve. I'm grateful for the clarification - as I now understand it,
a <col> is an independent layer with no descendents. What a pity, though!
I have a large table (thousands of small cells) which is intended to be a
visual cross-reference. I want to be able to colour cells in the "key" part
of the table so that "flagged" cells in different columns are different
colours (so if you're in the buying department you look for the green cells
against document names). The only way I can see now to do it is to have as
many classes as there are columns, so instead of simply having a class
"flagged" and using the col-id, I now have to have classes "flagged-col1",
"flagged-col2", etc. Seems a lot more redundant and so prone to error.

Fantasising now - what I'd really like is a "content value" selector: e.g
any element containing the substring "banana" (or even a regular
expression!) should have background image "xyz.gif" and the text itself
should not be visible.

Anyway, thanks for pointing out my misunderstanding!

--
####################
## PH, London
####################


 

Bookmarks

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are Off
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On

What is Bytes?

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over network members.
Post your question now . . .
It's fast and it's free

Popular Articles