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 6 of 6
  1. #1
    New Coder
    Join Date
    Oct 2011
    Posts
    27
    Thanks
    0
    Thanked 2 Times in 2 Posts

    CSS Attribute Selector + IE9

    Hey everyone!

    I experienced some weird behaviour with CSS and IE9. I'm programming a tree for navigation that looks like this in HTML:

    Code:
    <div class="treeEl" name="p1_1" type="1" selector="1" over="0">
      <div class="elDesc">
        <img class="elIcon" src="img/icon.png"></img>
        <div class="elText">p1_1</div>
        <div class="elOver"></div>
      </div>
      <div class="treeChildren">
         <!-- here more "treeEl" Elements with oher "treeChildren" Elements, and so on -->
      </div>
    Now i'm using attribute selectors in CSS to distinguish e.g. between selected and non selected elements. When i click on an elements, the attribute "selector" is set to 1 or 2 or 3 (and so on) and then CSS should change the background and the border style.

    Code:
    .treeEl:not([selector = "0"]) > .elDesc  {border: 1px solid rgb(220,220,240);background-color:rgb(240,240,250)}
    The weird thing is, that it only works sometimes. When i refresh the browser window, it normally doesn't work after that. I then have to start and end the debug mode of IE9 and refresh again....and it works! When i keep the debug mode activated, it always works.

    I already checked that the attribute is really set correctly with Javascript, so this is not the problem. It also seems to work correctly with Firefox, so i guess it's an IE related problem?? Did anyone make similar experiences or has an idea what the problem could be?

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,568
    Thanks
    23
    Thanked 643 Times in 642 Posts
    I have never seen css mark up like that before.

    I think the
    not([selector = "0"]) >
    is Jquery and I don't know if it works in the css file.

    And when your styling two elements you should separate them with a comma.

  • #3
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    no need to get fancy with selectors

    http://kimblim.dk/css-tests/selectors/

    :not(s)
    IE6: NO, IE7: NO, IE8: NO

    E[attr="name"]
    IE6: NO

    put them together, and you got something that isn't stable

    use classes
    Last edited by Sammy12; 11-20-2011 at 07:52 PM.

  • #4
    New Coder
    Join Date
    Oct 2011
    Posts
    27
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Thanks for the advise Sammy. You're probably right. But i also have quite simple attribute selectors like .treeEl[open = "1"] {...}. And those are also not always working. And i only use IE9 which is afaik supposed to support all of the selectors i use. And why does it work when i'm in debug mode. It doesn't really make much sense to me.

  • #5
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    maybe this might help

    http://www.whatwg.org/specs/web-apps...%2a-attributes

    you also need to use the html5 doctype, since creating attributes is html5
    maybe ie9 doesn't support that yet or more likely, buggy

    I'm not sure, but a live view of the problem would be helpful
    Last edited by Sammy12; 11-20-2011 at 10:16 PM.

  • #6
    New Coder
    Join Date
    Oct 2011
    Posts
    27
    Thanks
    0
    Thanked 2 Times in 2 Posts
    I just saw that other persons had the same problem with IE. CSS doesn't get refreshed when you change an attribute that is used as a selector. A solution would be to add en "el.className = el.className" after every change of an attribute. Maybe not the cleanest solution. So i probably will go back to use classes after all.


  •  

    Posting Permissions

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