Re: [css-d] Styling COL and COLGROUP
At 8:32 PM -0500 11/9/05, [EMAIL PROTECTED] wrote: So the only way to bold and center all the text in every cell of a particular column is to add those rules to every cell? (Sounds like bad coding to me.) Or to pretend that they are header cells when they aren't? (Sounds like bad coding to me.) No, though that is one way. The other way is to class all of the cells that share a column, and style via that class. A simple example: table tr td class=cityNew York/td td class=amnt$6,123/td /tr tr td class=cityBoston/td td class=amnt$5,627/td /tr tr td class=cityCleveland/td td class=amnt$7,111/td /tr tr td class=cityChicago/td td class=amnt$5,966/td /tr /table Now you can style each column uniquely. Yes, the city names could probably be th element with scope=row, and then you could dump all the class names for this example, but pretend it's a table with more than two columns. Also, the markup there isn't very accessible, but it's good enough to illustrate the point I'm making. I hope. -- Eric A. Meyer (http://meyerweb.com/eric/), List Chaperone CSS is much too interesting and elegant to be not taken seriously. -- Martina Kosloff (http://mako4css.com/) __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Styling COL and COLGROUP
Wednesday, November 9, 2005, 10:01:21 PM, Philippe Wittenbergh wrote:
.myclass {text-align: center}
td:first-child+td+td {text-align: center} /* the 3rd column */
***But***, and here IE is buggy again, you *cannot* group those
selector, else IE doesn't recognise the .myclass selector.
I just noticed that and made the change on the wiki:
http://css-discuss.incutio.com/?page=StylingColumns
Steve
--
http://mrclay.org/ : http://thefrenchhorns.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Styling COL and COLGROUP
Thanks, Eric. It was just so nice when I had stripped away a ton of code and had all these cells with no classes assigned or inline styling or anything (literally just: tdX/td, whereas the old version that somebody else coded looked like td align=center valign=middle bgcolor=E1E4E4span class=xX/span/td) and it worked, and worked beautifully, but only in IE. I'm tempted to keep my coding how it is now because they told me when I started here the usual thing: As long as it works in IE . . . Christian -Original Message- From: Eric A. Meyer [EMAIL PROTECTED] To: [EMAIL PROTECTED]; css-d@lists.css-discuss.org Sent: Thu, 10 Nov 2005 09:46:38 -0500 Subject: Re: [css-d] Styling COL and COLGROUP At 8:32 PM -0500 11/9/05, [EMAIL PROTECTED] wrote: So the only way to bold and center all the text in every cell of a particular column is to add those rules to every cell? (Sounds like bad coding to me.) Or to pretend that they are header cells when they aren't? (Sounds like bad coding to me.) No, though that is one way. The other way is to class all of the cells that share a column, and style via that class. A simple example: table tr td class=cityNew York/td td class=amnt$6,123/td /tr tr td class=cityBoston/td td class=amnt$5,627/td /tr tr td class=cityCleveland/td td class=amnt$7,111/td /tr tr td class=cityChicago/td td class=amnt$5,966/td /tr /table Now you can style each column uniquely. Yes, the city names could probably be th element with scope=row, and then you could dump all the class names for this example, but pretend it's a table with more than two columns. Also, the markup there isn't very accessible, but it's good enough to illustrate the point I'm making. I hope. -- Eric A. Meyer (http://meyerweb.com/eric/), List Chaperone CSS is much too interesting and elegant to be not taken seriously. -- Martina Kosloff (http://mako4css.com/) ___ Try the New Netscape Mail Today! Virtually Spam-Free | More Storage | Import Your Contact List http://mail.netscape.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Styling COL and COLGROUP
Thanks, Eric. It was just so nice when I had stripped away a ton of code and had all these cells with no classes assigned or inline styling or anything (literally just: tdX/td, whereas the old version that somebody else coded looked like td align=center valign=middle bgcolor=E1E4E4span class=xX/span/td) and it worked, and worked beautifully, but only in IE. I'm tempted to keep my coding how it is now because they told me when I started here the usual thing: As long as it works in IE . . . Christian No need to be defeatist :-) I think the relevant point is that all the crufty bits in the example you give (align attributes, extra spans, and so on) were muddying the markup with stuff that was there purely for presentation, which is what you're trying to get away from; whereas Eric's suggestion: table tr td class=cityNew York/td td class=amnt$6,123/td /tr snipped for brevity / is, if anything, _adding_ semantic information to the markup, which is as it should be. As Albert Einstein said in his early career as a web developer, Markup should be as simple as possible, but no simpler. The extra classes have relevant names, so you shouldn't feel that they are obstructing your quest for purity. Regards, Nick. -- Nick Fitzsimons http://www.nickfitz.co.uk/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Styling COL and COLGROUP
The extra classes have relevant names, so you shouldn't feel that they are obstructing your quest for purity. I think the problem posed is that *every* td has the same thing, the same thing, the same thing, so why should a class have to specified 40 times (number pulled from a hat) to style this one type of td? Now, if only one city td needed to be special, a class there would be different. For example, the city currently displayed on the page or in a little window would be bolded and made bigger. However, copy/pasting 'class=city' 40 times doesn't feel like a good programming practice, because we already know it's a city. It's the same dang thing 40 times. Making a colgroup for this city *one* time and being done with it is the intuitive thing to do, but since it doesn't work... problem. I think until the inheritance issue with colgroup is figured out, this will always be an issue. The instinctive reaction to colgroup and what it *should* do will bring up the restricting 4 properties limit as many times as there are people who see there is even a colgroup to begin with. :) My 2 cents, at least! __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Styling COL and COLGROUP
Thursday, November 10, 2005, 1:27:55 PM, CJ Larson wrote:
Making a colgroup for this city *one* time and being done with it is the
intuitive thing to do, but since it doesn't work... problem.
Have you tried it?
http://css-discuss.incutio.com/?page=StylingColumns (Combination method)
table id=cities
colgroup
col class=city
col class=population
/colgroup
...
/table
#cities td:first-child + td {
/* styles */
}
#cities .population {
/* styles */
}
Steve
--
http://mrclay.org/ : http://thefrenchhorns.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Styling COL and COLGROUP
Drawback is colgroup is only supported by IE and limited to width,
border, background and visibility styles. (I know the original poster
was designing for IE, but still...)
I think Eric Meyer had the right idea. I wouldn't advise using
adjacent sibling selectors. It's not very efficient.
Ideally, colgroup will be better supported in the future because it
would be invaluable for implementing online financials for
corporations in a quarterly statement, for example.
--dk
On Thu, 10 Nov 2005, Steve Clay wrote:
Have you tried it?
http://css-discuss.incutio.com/?page=StylingColumns (Combination method)
table id=cities
colgroup
col class=city
col class=population
/colgroup
...
/table
#cities td:first-child + td {
/* styles */
}
#cities .population {
/* styles */
}
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Styling COL and COLGROUP
CJ Larson wrote: I think the problem posed is that *every* td has the same thing, the same thing, the same thing, so why should a class have to specified 40 times (number pulled from a hat) to style this one type of td? Now, if only one city td needed to be special, a class there would be different. For example, the city currently displayed on the page or in a little window would be bolded and made bigger. However, copy/pasting 'class=city' 40 times doesn't feel like a good programming practice, because we already know it's a city. It's the same dang thing 40 times. Making a colgroup for this city *one* time and being done with it is the intuitive thing to do, but since it doesn't work... 'problem.' Exactly. You're right about every cell having the same thing. They are either empty or simply have an 'X' in them (and it is all appropriate content . . . even in the cases of emptiness). http://www.gateway.com/dw/video_card.shtml If you can add styling to a whole row you should be able to add styling to a whole column and assign semantic meaning to that column (and therefore all of its associated cells) exactly once. ___ Try the New Netscape Mail Today! Virtually Spam-Free | More Storage | Import Your Contact List http://mail.netscape.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Styling COL and COLGROUP
Have you tried it? http://css-discuss.incutio.com/?page=StylingColumns (Combination method) (Sorry you get this twice Steve; I sent it off list accidentally the first time.) I was referring to colgroup as specified in the original post, not work-around methods (that consequently don't work in IE). Thank you for pointing the page out, however, since it might help the original poster. Now consider the following scenario: I have a feature table in which I have 5 total columns: ID, Name, Description, Cost, and Activated. On my main feature page, I wish to display the Name, Desc, and Cost fields in that order. On my manage your features page, I wish to display the Name, Description, and Activated fields in that order. On my shopping cart page, I wish to display the Name and Cost fields in that order. Using the method you linked to, I will need to style all tables completely separate in my CSS. Using what most people think to be what colgroup should be, I would only have 1 colgroup per field, and simply omit or add a colgroup when I display certain columns. Easy! (but currently not possible) This isn't a particularly specific example, but this is the spot I find my own self stuck in with my work environment restrictions. To get around this, I have to specify classes in each td I wish to style as a colgroup. I understand exactly the frustration Christianz is experiencing, and hopefully the scenario helped you see a narrowed use for the wiki's example. :) Note: I'm not saying the wiki example is bad! Please don't start arguing with me about that, because I definitely for-100%-sure am NOT saying that. I'm just saying not everyone has the luxury of having the exact same styling needs in the exact same order on every table, which is where being able to style colgroups more would be invaluable. __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Styling COL and COLGROUP
Thursday, November 10, 2005, 1:59:25 PM, Dan Kletter wrote: Drawback is colgroup is only supported by IE and limited to width, border, background and visibility styles. Thanks to it's non-standard layout engine IE doesn't have these limitations on styling via COL. Nor do CSS2 browsers styling via adjacent siblings. adjacent sibling selectors. It's not very efficient. How is it inefficient besides having to know which column you're styling when you're writing the CSS? There are plenty of cases where you need to know markup structure to style it. This is another one. Ideally, colgroup will be better supported in the future True, but we'll probably be waiting quite some time. In the meantime... OT! the easy solution to all this would be a Javascript that copies the COL classNames to the cells, somehow dealing with spanned columns and rows. Someone knock that out...but post it on another list ;) Steve -- http://mrclay.org/ : http://thefrenchhorns.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Styling COL and COLGROUP
It's possible, and pretty simple. You just use the solution from the wiki, where you style the COL and IE picks it up, and use adjacent siblings for standards-complient browsers. This is what I'm trying to avoid, since I would rather not style for individual browsers, which means it would be not-simple to me. I'm all for hacking the dead, I love CSS, and I use it as much as possible, but when it means keeping separate styling in very different ways all over the place for each browser, I don't have the patience (personal flaw) nor time (dang deadlines) to keep up with all of that. [Giving the tables individual names would be possible for me, but giving the body tag a class would not in my personal situation, as I'm using asp.net and master pages. To be more technically correct, I could use code behind to set a class on the body depending on what the page's file name was or some such way, but this would be a hassle for me to set up for no real purpose. Plus keep in mind here that my shopping cart displays on the side (or bottom depending on what layout is chosen) of the main section, which would potentially have both of the other tables on it (though not at the same time, of course), which the body-class method wouldn't cover.] It's a little bit more CSS, but it gets the job done without wading into the conceptual impossibility that is trying to force table cells to inherit from a COL or COLGROUP. Or I could get the job done the stinky, effective, and cross-browser compatible way and not mess with clunky CSS tricks to force table cells to behave the same in different browsers by different means. :) Please understand that I'm not knocking the suggestion as one that's not feasible or useful, but it would create a larger manageability curve that I personally would prefer not to climb, even if I had the time. Respectfully, ~ cj __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Styling COL and COLGROUP
On 10 Nov 2005, at 9:21 am, [EMAIL PROTECTED] wrote: I don't hardly ever use these tags but I found they came in handy in my current assignment. However, in IE (not my favorite browser but I have to admit it's doing what I want to in this instance) everything displayed the way I intuitively imagined it would after adding style rules to these two tags but the style rules were ignored in Mozilla-based browsers. Does anybody have any experience with this? The subject came up 2 days ago. IE is overtly liberal with what it allows to style through those tabs. http://archivist.incutio.com/viewlist/css-discuss/65489 Philippe --- Philippe Wittenbergh http://emps.l-c-n.com/ __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Styling COL and COLGROUP
I don't hardly ever use these tags but I found they came in handy in my current assignment. However, in IE (not my favorite browser but I have to admit it's doing what I want to in this instance) everything displayed the way I intuitively imagined it would after adding style rules to these two tags but the style rules were ignored in Mozilla-based browsers. Does anybody have any experience with this? The subject came up 2 days ago. IE is overtly liberal with what it allows to style through those tabs. http://archivist.incutio.com/viewlist/css-discuss/65489 Philippe --- Philippe Wittenbergh http://emps.l-c-n.com/ So the only way to bold and center all the text in every cell of a particular column is to add those rules to every cell? (Sounds like bad coding to me.) Or to pretend that they are header cells when they aren't? (Sounds like bad coding to me.) ___ Try the New Netscape Mail Today! Virtually Spam-Free | More Storage | Import Your Contact List http://mail.netscape.com __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Styling COL and COLGROUP
On 11/9/05, [EMAIL PROTECTED] [EMAIL PROTECTED] wrote: I don't hardly ever use these tags but I found they came in handy in my current assignment. However, in IE (not my favorite browser but I have to admit it's doing what I want to in this instance) everything displayed the way I intuitively imagined it would after adding style rules to these two tags but the style rules were ignored in Mozilla-based browsers. Does anybody have any experience with this? I once read through a long and protracted Mozilla bug report on this which I'm currently unable to locate; IIRC the problem, conceptually, is that individual table cells are not actually children of the COLGROUP or COL; as a result, they don't inherit properties from COLGROUPs and COLs in an intuitive way. And Philippe is right that IE is buggy -- CSS2 is very explicit on the matter of which properties may be set on a COLGROUP or COL and be applied to their cells: 'border', 'background', 'width' and 'visibility'. -- May the forces of evil become confused on the way to your house. -- George Carlin __ css-discuss [EMAIL PROTECTED] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Styling COL and COLGROUP
On 10 Nov 2005, at 11:13 am, James Bennett wrote:
I once read through a long and protracted Mozilla bug report on this
which I'm currently unable to locate; IIRC the problem, conceptually,
is that individual table cells are not actually children of the
COLGROUP or COL; as a result, they don't inherit properties from
COLGROUPs and COLs in an intuitive way. And Philippe is right that IE
is buggy -- CSS2 is very explicit on the matter of which properties
may be set on a COLGROUP or COL and be applied to their cells:
'border', 'background', 'width' and 'visibility'.
James already answered the question more or less; a good explanation is
the text by Ian Hickson [1].
The bug James refers to might have been bug 915 [2].
There was a discussion on the subject on the www-style mailing list
[3], it is not the only (recent) one, browse the archives there.
In short it is all a question of the DOM, the cascade and inheritance.
View your table with Gecko's DomInspector, and you'll see that the
tr/td are not children/descendant of the col/colgroup.
You can do col class=myclass, and use that for IE, and then for
good browsers, use adjacent sibling selectors for better browsers.
.myclass {text-align: center}
td:first-child+td+td {text-align: center} /* the 3rd column */
***But***, and here IE is buggy again, you *cannot* group those
selector, else IE doesn't recognise the .myclass selector.
[1] http://ln.hixie.ch/?start=1070385285count=1
[2] https://bugzilla.mozilla.org/show_bug.cgi?id=915
[3] http://lists.w3.org/Archives/Public/www-style/2005Jul/0110.html
Browsers are fun anyway, and HTML tables are messy objects.
Philippe
---
Philippe Wittenbergh
http://emps.l-c-n.com/
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
