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.

[vineet]

class name should not have space in between name.

<div id="ext-gen143" class="x-layer x-combo-list "

vineet

[scdowney]

Not sure if I understand what you are referring to Vineet? If its the fact that the class is two space-seperated values (x-layer, and x-combo-list), that is out of my control. The actual HTML is auto-generated by ExtJS in our web-application, and I have had success locating elements by class (ie: div.x-layer or div.x-combo-layer) in other scenarios on this project. The issue here appears to be with Internet Explorer and the CSS Attribute Selector specifically. I have tested multiple selectors and combinations on multiple html elements on multiple browsers, and the specific problem with the style attribute in IE seems to be the issue. Please clarify as well if I did not understand your suggestion!

[vineet]

keeping space in class names is not valid. replace the space with - or _

it should be either
class="x-layer_x-combo-list"

or

class="x-layer-x-combo-list "

some browsers dont accept class names with space in between.

i dont know about the editor which is generating the css.

vineet

[bazz]

Originally Posted by vineet

keeping space in class names is not valid.

Oh yes it is. It is important to note the difference between when there are two class names and one that should have no space. If the name of a class involves two words then they should be joined with an underscore or (maybe) a hyphen. However, when the two words refer to two different classes, showing them as two different words is correct.

@OP, sorry I can't help with your question.


bazz

[bazz]

@OP:

Your question threw me completely first time, when you said this:

I am working on a project with work, and it requires I use CSS selectors to locate elements within a webpage.

.

That sounds to me more like how it would be described in a server side forum, where a script is looking through a whole file for specific text. I think whgat you are trying to do is make the css relate to the html.

Hopefully that ain't too pedantic.

I still am unable to help much but I find it strange that in the first line of html you posted, there is a div and two classes yet; someone has decided it a good idea to add inline css as well. Bit of a mess. It is I think a likely contributor to your problem.

I would hope the workflow of your project should include the server side guys, who can amend the css in the outputted documents and put it into the external css. Would make like easier for you.

bazz

[oesxyl]

Originally Posted by vineet

keeping space in class names is not valid. replace the space with - or _

it should be either
class="x-layer_x-combo-list"

or

class="x-layer-x-combo-list "

some browsers dont accept class names with space in between.

i dont know about the editor which is generating the css.

vineet

I guess there are two names there not one. You can use multiple class names in a class attribute separated with space. The problem is not there.

best regards

[drhowarddrfine]

My thought is the semicolons don't belong and might be tripping up IE8 and, even though selectors finally work in IE8, it's still messing with its DOM tree and IE fails miserably with the DOM.

[scdowney]

@bazz: The html is actually for a single page AJAX web app, which is built using the ExtJS JS framework, so the html is all dynamically rendered, and that is the reason for the use of both classes and in-line styles. Unfortunately there is not much I can do on that part. The real issue is that there are two div's on the page at any time with the x-combo-list class, and the id's are dynamically generated, and the only way to target specifically the combo-list that is open is using the visibility style that gets automatically updated by ExtJS when the combo-list opens (that is why the inline-styles are there, because ExtJS uses them for dynamic changes rather than classes for some reason). I have also considered using the "nth-of-type" and other pseudo-class selectors, but the problem is that I am using the Selenium automated testing framework (that is what is using the css to target elements), and Selenium does not support the pseudo-classes that would be of any use to me! Hopefully that explains the problem in a bit more detail?

@drhowarddrfine: In the "various combinations" I experimented with, I tried all combinations I could think of including: no semi-colons, single quotes around the value, double quotes around the value, no quotes around the value, just the "visible" part without "visibility:" prefixing it, and none of these worked to locate that particular div in IE.


Also to further emphasize that I don't think its particularly a CSS2 vs 3 problem, is that I can use the [attr~='val'] and [attr*='val'] etc. on other attributes (class, name, autocomplete, etc.), it just doesnt pick up the values associated with the "style" attribute. That is the strange part to me.

[sryfirsuc]

Here is, in my opinion, the most interesting part:
CSS Code:

//If first time key in date run statement
if(first == 0){
++first;//Track if is the first record key in
items[i] = new Item(itemNumber, itemDesc, sellPrice, quantity);
}
//Else continue key in record
else{
entries = items[0].getEntries();//Get number of entries entered
for(j=0; j<entries; ++j){

duplicate = items[j].equals(itemNumber, itemDesc, sellPrice, quantity);//Check for duplication of entries

if(duplicate == true) {
Print.duplicateError();
--i;
--looping;
break;
}
}
if(duplicate == false)//else save record
items[entries] = new Item(itemNumber, itemDesc, sellPrice, quantity);
}
______________________________
Courtier conseil financement immobilier achat | Demande credit simulation plan de financement immobilier | Calcul pret projet financement immobilier travaux