471,582 Members | 2,400 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,582 software developers and data experts.

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:

Expand|Select|Wrap|Line Numbers
  1. <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:

Expand|Select|Wrap|Line Numbers
  1. div.x-combo-list[style~='visible;']
  2. 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):

Expand|Select|Wrap|Line Numbers
  1. div.x-combo-list
  2. div.x-combo-list[class~='x-combo-list']
  3. div.x-combo-list[class~='x-layer']
  4. div.x-combo-list[class='x-layer x-combo-list ']
  5. div.x-combo-list[style]
  6. input[name]
  7. input[name='FIRST_NM']
  8. 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.

Expand|Select|Wrap|Line Numbers
  1. div.x-combo-list[style|='z']
  2. div[class~='x-combo-list'][style~='visible;']
  3. 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,

Dec 12 '09 #1
2 3553
7,435 Expert 4TB
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.
Dec 12 '09 #2

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='val'] 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.
Dec 12 '09 #3

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

1 post views Thread by Spoofed Existence | last post: by
7 posts views Thread by Aaron Prohaska | last post: by
3 posts views Thread by Harlan Messinger | last post: by
6 posts views Thread by _googlepost | last post: by
reply views Thread by leo001 | last post: by
reply views Thread by Vinnie | last post: by
1 post views Thread by lumer26 | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.