Attribute selector and IE6

[_googlepost]

I have some CSS that goes something like this:

table.TableStyle {font-family: "Helvetica", "Ariel"; background-
color:white; border-collapse:collapse;}
table.TableStyle COLGROUP[id="ColGroup0"] { background-
color:lavender;}

The second line is a style that is applied to a particular named
COLGROUP element in tables assigned the TableStyle class.
Unfortunately, while this works in most modern browsers (including
IE7), it fails in IE6, which I've discovered doesn't support attribute
selectors.

This could be worked around by assigning the COLGROUP a style
(<COLGROUP class="Style0">, for instance). But that would be less
nifty if the table was changed from "TableStyle" to, say,
"AnotherStyle" (perhaps via a Javascript DOM call), since the COLGROUP
would have to be altered as well. I assume that I'm out of luck if I
want to support IE6 with the existing attribute selector method?

Also, it looks like IE6 doesn't even parse attribute selectors
properly, much less apply them? I tried defining an attribute
selector and a regular one together using the CSS grouping syntax, so
at least the style info would only be defined once:

..EvenStyle, table.TableStyle COLGROUP[id="ColGroupEven"] { background-
color: #DCDCDC; }

this works in the other browsers, but fails with IE6 - "EvenStyle"
doesn't get defined, so I'm assuming their parser choked on the
attribute selector and ignored the entire declaration?

[Bergamot]

_g*********@oberst.ca wrote:

>
table.TableStyle COLGROUP[id="ColGroup0"] { background-
color:lavender;}

Why don't you just use ID selectors instead of attribute selectors?

Also, it looks like IE6 doesn't even parse attribute selectors
properly, much less apply them?

IE6 is quite deficient and broken when it comes to CSS. Not much you can
do about things it doesn't support, so you can either forget about IE6,
or use another method to get the results you want.

--
Berg

[Beauregard T. Shagnasty]

_g*********@oberst.ca wrote:

I have some CSS that goes something like this:

table.TableStyle {font-family: "Helvetica", "Ariel"; ...

....

Also, it looks like IE6 doesn't even parse attribute selectors
properly, much less apply them?

It might if you spelled it correctly.

table.TableStyle {font-family: helvetica, arial, sans-serif; ...

You don't need quotes around single-word fonts.

I didn't pay much attention to the rest of your post, because you have
errors. Put it on the web, validate it, and come back with the URL.

--
-bts
-Motorcycles defy gravity; cars just suck

[=?ISO-8859-1?Q?G=E9rard_Talbot?=]

_g*********@oberst.ca wrote :

I have some CSS that goes something like this:

table.TableStyle {font-family: "Helvetica", "Ariel"; background-
color:white; border-collapse:collapse;}

Ariel is not a known font name. I guess you were referring to Arial.
You do not need to quote single word font-family names.

table.TableStyle COLGROUP[id="ColGroup0"] { background-
color:lavender;}

lavender is not a CSS 2.1 reserved color name.

Try
#E6E6FA
instead.

The second line is a style that is applied to a particular named
COLGROUP element in tables assigned the TableStyle class.
Unfortunately, while this works in most modern browsers (including
IE7), it fails in IE6,

In 6-12 months or so, a wide majority of IE6 people will have either
switched to Firefox 3, switched to Opera 10 or to IE 7 (IE 8?).

which I've discovered doesn't support attribute

selectors.

Did you try

#ColGroup0 { background-color: lavender;}

Can you create a webpage, validate the markup code and CSS code and then
just post an url?

Gérard
--
Using Web Standards in your Web Pages (Updated Dec. 2006)
http://developer.mozilla.org/en/docs...your_Web_Pages

[_googlepost]

Gerard - I'm generating the HTML dynamically based on some parameters,
one of which is the name of a style, which I add to the <TABLE
class=""declaration. The reason the attribute selectors seemed
interesting over a plain ID selector like "#ColGroup0..." is that the
stylesheet in question could then have multiple styles (say,
TableStyle and AlternateStyle), each with its attribute selector
styles for "ColGroup0" or the other identified COLGROUPs, and changing
the single class identifier generated in the the TABLE tag from
"TableStyle" to "AlternateStyle" would pick up the appropriate
attribute selector style. With the "#" example, I'd need something
like "#TSColgroup0..." and "#ASColGroup0...", and either the input to
the HTML generation would need to pass extra information about the
style names or some naming convention would be needed.

As for the IE6 parsing, I inherited some of the style info with the
font typo and nonstandard color name, but those issues aren't relevant
to IE6 parsing. Producing a freestanding example outside our firewall
would be a bit of a pain, but the following (which validates) is a
better example:

table.TableStyle {font-family: helvetica, arial, sans-serif;
background-color:white; border-collapse:collapse;}
table.TableStyle COLGROUP[id="ColGroupEven"], .TSWombat { background-
color: #DCDCDC; }
....
<COLGROUP class="TSWombat" SPAN=3>
<COLGROUP id="ColGroupEven" SPAN=2>

doesn't work in IE6 - in IE7/Safari/Firefox both columns defined by
the COLGROUPs have the grey background color specified, but in IE6
neither do, not even the one using theplain class style TSWombat. It
would have been nice if IE6 would have parsed and ignored the
attribute selector and still handled the class selector, but c'est la
vie. I probably can't get away with non-supporting IE6 on this, so
I'll go back and tweak my generator to do something different.

[Bergamot]

_g*********@oberst.ca wrote:

>
With the "#" example, I'd need something
like "#TSColgroup0..." and "#ASColGroup0..."

Maybe I'm dense, but I don't follow your reasoning. Your code:

<COLGROUP id="ColGroupEven" SPAN=2>

table.TableStyle COLGROUP[id="ColGroupEven"] { background-color: #DCDCDC; }

Explain again why you can't do instead:

table.TableStyle COLGROUP#ColGroupEven { background-color: #DCDCDC; }

BTW, IIRC col styling is better supported than colgroup.

--
Berg

[_googlepost]

On May 11, 1:56 pm, Bergamot <[e-mail]:

Maybe I'm dense, but I don't follow your reasoning. Your code:

<COLGROUP id="ColGroupEven" SPAN=2>
table.TableStyle COLGROUP[id="ColGroupEven"] { background-color: #DCDCDC; }

Explain again why you can't do instead:

table.TableStyle COLGROUP#ColGroupEven { background-color: #DCDCDC; }

No, it is me that is dense! Thanks very much for that example - for
some reason I hadn't realized that the ID selector syntax could be
attached to the end of a class/tag string in that fashion. I'm a
programmer, not a web designer, so I'm coming to CSS through the back
door, and none of the references I was looking at had selector
examples at that level of detail. I seem to remember trying something
similar in my testing, but I probably goofed the syntax.

Using this, I can now get the COLGROUP styling to work on IE6. I'd
seen warnings that some browsers had limited CSS support on COLGROUP,
but I think all of my target group support the limited things I'm
doing (background-color, etc).

By the way, the ID attribute is intended to be unique within a markup
document, but I've been using ColGroupEven and ColGroupOdd on
alternating COLGROUPs in a table. Of course it gives validation
warnings, but I can live with that if it lets me doing the alternating
colors on the columns. It doesn't look like this will cause me
problems with any of the major browsers?

Thanks again,
David Oberst, Yellowknife, NWT, Canada