Forum Moderators: not2easy
I thought it would be nice to test in IE7 as it just might be possible to offer/use skin for IE7 too but... I got halted at the first hurdle
the site I would like to customise a wee bit uses tables and lots of them, and is minus any logical nesting structure in places, there are some classes set but never where you need them ;) - so the only way I can target a particular set of links is via a unique table attribute.. great, I thought, IE7 supports attribute selectors [w3.org] now, so this should be a breeze
but I may have found one of it's oddities - It does support the attribute selector on most elements,
BUT it doesn't seem to support selection using certain attributes and only on tables from what quick tests have shown :(
For the <table> element
Heres what works:
Here's what doesn't: (just about everything that could be useful!)
the ".." can be either alpha or numeric
(the unique attribute that I need to use is height :o)
this list is perhaps not exhaustive, just the ones I tried
anyway thought I would post here in case question ever comes up and I would be interested to hear if anyone has read anything about why this is, or if it's a reported bug already..
Suzy
I tested proprietary
heightwidthborder10100%1divpspanulul liolol lidldl dtdl ddtabletable theadtable thead trtable thead tr thtable thead tr tdtable tfoottable tfoot trtable tfoot tr thtable tfoot tr tdtable tbodytable tbody trtable tbody tr thtable tbody tr tdI stopped around there, mostly because it started to not work. IE 7 displayed perfectly fine matching all attribute selectors on everything except the tables - with syntax as:
selector[height='10'] { ... }
selector[width='100%'] { ... }
selector[border='1'] { ... }It might be interesting to some that when I tested the following:
table[height] { ... }
table[width] { ... }
table[border] { ... }IE 7 actually displayed it. It was once I started getting more complicated (with
='10'I wonder why...
height10It's "Current Style" (I'm guessing this is the "Computed Style" in Mozilla's DOM Inspector?) ends up being:
borderBottomColor: #d4d0c8
borderColor: #d4d0c8
borderLeftColor: #d4d0c8
borderRightColor: #d4d0c8
borderTopColor: #d4d0c8
display: block;
hasLayout: -1
height: 10pxThe instance described above the border-color was meant to be set to
#f00borderWidth
I found
tr[width=".."]also tried
td[colspan=".."]Robin, I did check the DOM too and tried some of IE's "Read Only" attribute values (the values of the explicitly set ones were as expected) just in case, but no joy
ack well.. just another mystery perhaps and it's not important for now
<style type="text/css">
td {border: 1px solid #ff0000;}
table tr + tr + tr td{border:1px solid #00ff00;}
</style>
<table>
<tr>
<td> </td>
<td> </td>
<td> <table>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>Green Border</td>
</tr>
</table></td>
</tr>
</table>
Only IE gets it wrong FF2 and O9 show the green border.
Just playing about,trying to learn.
Is table tr + tr + tr td even allowed?
I never learned up on this because I was told that IE doesn't support any selectors. It appears as if I was wrong.
I think I need to study up on this a bit more.
Is there a page of browser compatibilities for these, like the DOM Compatibility Tables [quirksmode.org]?
###########
Just in case anybody is as daft as me and doesnt understand what Attribute Selectors are/do.
Sorry if I've confused!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
h1[title] { color: #ff0000; }
a[href="http://www.w3.org/"] {color:#ff00ff;}
table[width] {border:2px solid #000000;}
table[width="200"] {border:2px solid #ff0000;}
</style>
</head>
<body>
<h1 title="i get it now">this is red</h1>
<h1>this isn't</h1>
<p><a href="http://www.w3.org/">I'm Pink</a></p>
<p><a href="http://www.bbc.co.uk/">I'm Not</a></p>
<table width="200">
<tr>
<td>Black table border in IE7</td>
</tr>
<tr>
<td>Red table border in FF2 O9</td>
</tr>
</table>
</body>
</html>
Is table tr + tr + tr td even allowed?
Yes it's allowed ;)
It's a mix of descendant selectors and an Adjacent Sibling Selector [w3.org] - and if you add a fourth row to that table it will also have a green border as that td would also be a descendant of a tr that has a further 2 tr's as siblings.
table tr = descendant selector - white space is the combinator
tr + tr = adjacent sibling selector - '+' is the combinator
tr > td = child selector - '>' is the combinator
in the latter 2 that the whitespace is optional
Is there a page of browser compatibilities for these,
Not a extensive one, but I think that's what we're just finding out here ;)
There is a page at quirksmode [quirksmode.org] which says that attribute selectors are supported (CSS2.1 and some CSS3) - Microsoft seem to updating their documentation [msdn.microsoft.com]
- and if you want to have a look around for yourself, try Eric Meyers Test Suite [meyerweb.com] - the test suite is testing true for IE7 and these particular selectors but they are very simple tests.
I'm trying to build as simple as possible example of the difference not only between attributes but now elements too if I get it done I'll post it later
[edited by: SuzyUK at 5:15 pm (utc) on Feb. 1, 2007]
The height attribute for a table would fail
yes but even if the HTML fails validation that shouldn't mean that height is not an attribute for these purposes - it could be a custom one after all - and custom ones see to work well?
I'll admit I was looking for some connection between deprecated values but can't see any connection yet..
[edited by: SuzyUK at 5:23 pm (utc) on Feb. 1, 2007]
I found tr[width=".."] works?
Oops, my mistake :) You're right, it does :)
I'll admit I was looking for some connection between deprecated values but can't see any connection yet..
I hadn't found one either, but I did have a 'theory'... What if it's their odd, 1%-finished attempt at rooting out proprietary attributes that shouldn't be used anymore?
We all know the greatest offenders of the proprietary attributes are in tabled layouts, so what if they started there? What if they didn't bother on, say, a
dldlyes but even if the HTML fails validation that shouldn't mean that height is not an attribute for these purposes - it could be a custom one after all - and custom ones see to work well?
Speaking of custom selectors, has anybody tried using a custom DTD with properly defined custom selectors?
<menu active="true">.. and seen how IE 7 handles that?
I do have a test page but it's way longer than I wanted because as I tried one thing I discovered another
not only do table[att="value"] selectors not work as I would have expected but there are anomalies for it and then some other elements too..
summary first, then example code, if you want, after. You can help by checking my code and logic, please!
for elements: table, div, p, li, span, h3 and ul - I checked a custom attribute and value = [foo="bar"], the height attribute, with and without value and the width attribute, with and without value
(and if anyone has time to check more, please do..)
results: for the first pass, I set up some CSS like so:
*[foo="bar"] {background: #0f0;} /* custom - green */
*[height] {background: #ff0;} /* attribute only - yellow */
*[height="40"] {background: #f0f;} /* attribute with value - pink */
*[width] {background: #ff0;} /* attribute only - yellow */
*[width="30"] {background: #f0f;} /* attribute with value - pink */
cascading so the [attribute="value"] would overrule the [attribute] only selector, I also set a default background on all elements to grey so it would be easy to see which ones were duds.
The use of the universal selector for the target element should've covered every element it was applied it too, but more on the 'should' further down.
first result
at this stage it applied across the board correctly to ONLY
the div, li, span and ul - it did not apply fully to the p and h3, in their case it DID NOT apply where the width was the attribute used AND it neither applied the the [width] nor the [width="value"] selectors?
I know not why, the only 'connection' I can make between a <p> and an <h3>, that is also different from the rest of the elements tested, is that they both have default margins - although I did explicitly reset all margins in my test - so no explanation, any ideas?
next on this pass and why I started this possibly pointless excercise in the first place - the <table> well they, apart from the one with the custom attribute, were all grey, as in default.
but.. but.. but.. it shouldn't be according to what I said/thought earlier
doesn't seem to support selection using certain attributes and only on tables
when I said that I already knew some should work, so what was different from first test to second?
The Universal Selector is what .. surely it can't be that?
replace the universal selector with the specific table selector and you get a different result, so apparently it is the universal selector.. BUT ONLY for the tables (in the ones I tested).. try getting specific for the <p> and <h3> and the result for them does not change.
Once the specific table selector is applied the results change for the tables. They are no longer the default colouring, instead it applies both [width] and [height] attribute selector BUT NOT [width="value"] or [height="value"}.
so we have a wider higher array of differences than I originally thought. If indeed it is a bug how would you describe it!
IE7 passes the test suite [meyerweb.com] - but a real life application appears to be unworkable for now
My test code is just about as long than this post so I'll stop here.
I know not why, the only 'connection' I can make between a <p> and an <h3>, that is also different from the rest of the elements tested, is that they both have default margins - although I did explicitly reset all margins in my test - so no explanation, any ideas?
My vote still goes for non valid markup.
using width on p,h1,h2,h3 ... IE ignores the width atribute/value so the atribute 'sort of' doesnt exist :p
This may enlighten/confuse
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
h1,div,span,p {border:1px solid #ccc;} /*Default to grey border*/
[width="300px"] {border:2px dashed #00ff00;}
[fluffy="kittens"] {border:4px dotted #ffccff;}
/*Try the one below in IE7 FF2 */
/*[style] {border:8px solid #000;} */
</style>
</head>
<body>
Notice IE7 ignores width and doesn't change colour<br />
FF2 also ignores width but does change border colour<br />
Both pay attention to the style width.
<h1 width="300px">H1 width=300</h1>
<h1 style="width:300px">H1 style=width:300</h1>
<div width="300px">DIV width=300</div>
<div style="width:300px">DIV style=width:300</div>
<br />
<span width="300px">Span width=300</span>
<p width="300px">P width=300</p>
<p style="width:300px">P style=width:300</p>
<p fluffy="kittens">p fluffy=kittens</p>
</body>
</html>
My vote still goes for non valid markup.using width on p,h1,h2,h3 ... IE ignores the width atribute/value so the atribute 'sort of' doesnt exist :p
hehe I would be tempted to go that way too *if* height didn't work either, it sort of doesn't exist either :o but at the minute I'm preferring Setek's theory
but I did have a 'theory'... What if it's their odd, 1%-finished attempt at rooting out proprietary attributes that shouldn't be used anymore?
except maybe the 1%-finished attempt relates to the job of Selector support (j/k it's not that bad)!
I'm thinking, that FF et all supports the width attribute for the purpose of selector targetting as a custom attribute - just like "foo" and "fluffy" - it's got nothing to do with whether they actually support the attribute for it's proprietary purpose (e.g. applying the width or height)?
Agree with FF2 and treating width= as a custom selector, as it doesnt actualy make the width 300. Thats why fluffy kittens was added to show that thing that happened watjamacallit fibblybob.
Anyhoo filled some time :) You and your bits of fun ;)
I'm thinking, that FF et all supports the width attribute for the purpose of selector targetting as a custom attribute - just like "foo" and "fluffy" - it's got nothing to do with whether they actually support the attribute for it's proprietary purpose (e.g. applying the width or height)?
That's a good point - but with the IE 7 tests for width and height on all the ones that worked (
divpulOkay, it's the weekend, it's time to give up and go do something actually fun :)
apart from the fact that I totally understand that phrase in relation to this discussion :o
you never know if we search for it a few days we might even have a "googlewhack"
