CodingForums.com - View Single Post - Strange CSS Attribute Selector/Internet Explorer Problem

scdowney · 12-12-2009, 01:58 AM

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:

Code:

<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:

Code:

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):

Code:

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.

Code:

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.

12-12-2009, 01:58 AM	PM User \| #1
scdowney New to the CF scene Join Date: Dec 2009 Posts: 3 Thanks: 0 Thanked 0 Times in 0 Posts	Strange CSS Attribute Selector/Internet Explorer Problem 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: Code: <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: Code: 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): Code: 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. Code: 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.