Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 10 of 10
  1. #1
    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.

  • #2
    Regular Coder
    Join Date
    Jun 2008
    Posts
    173
    Thanks
    2
    Thanked 9 Times in 9 Posts
    class name should not have space in between name.

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

    vineet

  • #3
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!

  • #4
    Regular Coder
    Join Date
    Jun 2008
    Posts
    173
    Thanks
    2
    Thanked 9 Times in 9 Posts
    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

  • #5
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    Quote Originally Posted by vineet View Post
    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
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #6
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    @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
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #7
    Master Coder
    Join Date
    Dec 2007
    Posts
    6,682
    Thanks
    436
    Thanked 890 Times in 879 Posts
    Quote Originally Posted by vineet View Post
    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

  • #8
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    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.

  • #9
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    @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.

  • #10
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •