5 Replies - 1030 Views - Last Post: 12 December 2009 - 12:08 PM

#1 scdowney  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 11-December 09

Strange CSS Attribute Selector/Internet Explorer Problem

Post icon  Posted 11 December 2009 - 07:49 PM

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.

Is This A Good Question/Topic? 0
  • +

Replies To: Strange CSS Attribute Selector/Internet Explorer Problem

#2 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1359
  • View blog
  • Posts: 3,424
  • Joined: 28-November 09

Re: Strange CSS Attribute Selector/Internet Explorer Problem

Posted 11 December 2009 - 08:09 PM

I'm either way outdated or something else.... What type of CSS is this? 3? Off to google...

Ya, CSS3, no wonder... You are aware that CSS3 has very little support in IE8 right? And most users are still on 7 let alone 8 (or even 9...)

Advice: Stick with CSS2, full implementation is a bad idea until at least 2-3 years when IE 7+8 bite the dust.

EDIT - 3/5 tags work in FF3 which is still in wide use, as well as IE 8 which scored worse on validation tests.

This post has been edited by Lemur: 11 December 2009 - 08:11 PM

Was This Post Helpful? 0
  • +
  • -

#3 scdowney  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 11-December 09

Re: Strange CSS Attribute Selector/Internet Explorer Problem

Posted 11 December 2009 - 08:10 PM

The locators are a combination of 2.1 and 3, but on msdn they state the ones I am using are compatible with IE6-8.
Was This Post Helpful? 0
  • +
  • -

#4 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1359
  • View blog
  • Posts: 3,424
  • Joined: 28-November 09

Re: Strange CSS Attribute Selector/Internet Explorer Problem

Posted 11 December 2009 - 08:12 PM

I hate to say it but microsoft is never a reliable source about themselves.

Run it through this:
http://www.css3.info/
Was This Post Helpful? 0
  • +
  • -

#5 scdowney  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 11-December 09

Re: Strange CSS Attribute Selector/Internet Explorer Problem

Posted 12 December 2009 - 08:50 AM

Lemur,

Thanks for the advice. I take a look at the link you sent once I am back at work. Also worth noting is a few interesting things. The [attr~='val'] and [attr='val'] selectors both appeared in CSS2, and the strange bit is that I would tend to agree it might just be an IE not playing nice with standards, if it werent for the fact that in the experimenting that I have done with various combinations, both the [attr~='val'] and [attr='val'] selectors work perfectly fine in IE when matching values of the other attributes (such as class, name, and autocomplete, in my examples) it is JUST the values of the style attribute that do not seem to match, even when I use the exact same syntax as I do in the working ones. That is the particularly strange bit to me, that its JUST the style attribute values that dont seem to work (because i can also match using JUST [style], but as soon as I look for ANY value attached to that style, it no longer works).

Also, just to clarify, I have actually done testing in FF, Safari, Chrome and IE, I just have not had a chance to test in multiple versions of IE up to this point.

Thanks for your advice thus far!
Was This Post Helpful? 0
  • +
  • -

#6 Lemur  Icon User is offline

  • Pragmatism over Dogma
  • member icon


Reputation: 1359
  • View blog
  • Posts: 3,424
  • Joined: 28-November 09

Re: Strange CSS Attribute Selector/Internet Explorer Problem

Posted 12 December 2009 - 12:08 PM

http://tredosoft.com/Multiple_IE
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1