Strange CSS Attribute Selector/Internet Explorer Problem

[scdowney]

First and foremost, thank you in advance for any attempts to help me out.

I am working on a project with work, and it requires I use CSS selectors to locate elements within a webpage. For the most part, I have had no issues using the selectors, but I am having a very strange issue which does not seem to make much sense to me. Please advise if you have any input at all.

Note, I am keeping this description at a high level for now because I believe the issue rests with the way I am using the selectors themselves and not with where they are being used (I will elaborate if and whenever necessary). Also, I have only tested on IE8 so my examples are limited to that.

The particular issue I am having is with the CSS Attribute Selectors, and it is as follows:

This is the HTML element I am attempting to locate:

<div id="ext-gen143" class="x-layer x-combo-list " style="position: absolute; z-index: 11000; visibility: visible; left: 367px; top: 317px; width: 140px; height: 76px; font-size: 11px;">

Now, the ideal selector for my purposes is one of the following:

div.x-combo-list[style~='visible;']
div.x-combo-list[style~='visibility: visible;']

Both of which work perfectly fine in Firefox and Safari, but do not find a match in Internet Explorer (8).

In attempts to find a solution, I experimented with various combinations, and found some very strange results (this is just a subset of the combinations I tried, which I think exemplifies the scenario):

div.x-combo-list
div.x-combo-list[class~='x-combo-list']
div.x-combo-list[class~='x-layer']
div.x-combo-list[class='x-layer x-combo-list ']
div.x-combo-list[style]
input[name]
input[name='FIRST_NM']
input[name='FIRST_NM'][autocomplete='off']

All of the above eight selectors find matches in Internet Explorer (8), but the following (in addition to the original two above) do not find matches in IE8.

div.x-combo-list[style|='z']
div[class~='x-combo-list'][style~='visible;']
div[class~='x-combo-list'][style~='visibility: visible;']

What this seems to tell me, for some reason, is that it appears Internet Explorer (8) can match the "style" attribute with the basic Attribute Selector, but it cannot seem to match anything using any Value Selectors for the "style" attribute, but it CAN match with Value Selectors for the "class" (or other non-style) attribute(s).

I am not sure if my explanation will suffice, but I think I have showed the issue that I have, so any input whatsoever anyone might have would be greatly appreciated!

Thanks again,

scdowney.

[drhowarddrfine]

Remove the semicolons. They don't belong in your examples.

While its CSS2.1 support is good, your problem may lie in its DOM implementation which is 12 years behind all other browsers. I won't have time to look into this for a couple days.

I have only tested on IE8 so my examples are limited to that.

Never, ever do that. Always use a modern browser when you are testing markup.

[scdowney]

Drhowarddrfine,

Thanks for your response. I have actually tried multiple combinations, including no semi-colons (as well as single/double/no quotes around the values), none of which had any success in IE.

Just to clarify, I have tested in FF, Chrome, Safari, and IE, I just have not yet had a chance to try previous versions of IE is all.

I fear it may indeed be a DOM implementation issue, because the selectors I am trying to use are indeed 2.1 not 3 (except for the =* which was just a stab at a solution), and the strange bit is the fact that I can successfully target elements using [class~='val'], [name~='val'], [autocomplete='v al'] etc, and even [style] by itself, but AS SOON as I try to add an = or a ~= to the [style] it no longer works, but ONLY with the style attribute. That seems very strange to me.