...

View Full Version : CSS Attribute Selector + IE9



moon-safari
11-20-2011, 03:05 PM
Hey everyone!

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



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


.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?

sunfighter
11-20-2011, 07:35 PM
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.

Sammy12
11-20-2011, 07:47 PM
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

moon-safari
11-20-2011, 10:05 PM
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.

Sammy12
11-20-2011, 10:14 PM
maybe this might help

http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#embedding-custom-non-visible-data-with-the-data-%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

moon-safari
11-21-2011, 09:16 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum