By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,397 Members | 2,552 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,397 IT Pros & Developers. It's quick & easy.

Strange CSS Attribute Selector/Internet Explorer Problem

P: 2
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
Share this Question
Share on Google+
2 Replies

Expert 5K+
P: 7,435
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

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