Nested Border-radiuses not loading until play with styles
Update - this has been solved - see the end
Firstly - this is exactly what i've been looking for, for ages! It's really good.
I have one issue with it - I can't seem to get nested border-radiuses working unless I manually go into IE developer tools and turn a style on or off.
I have tried it with a simple example in static html, eg: <div class="border1"><div class="border2"></div></div>, and this works fine. It only seems to be a problem in my convoluted dhtml example, where there is a big tree structure and all the elements are being created in javascript.
So, unless this is some kind of known issue (I looked through the bug reports and didn't find any mention though), is there some way of programmatically resetting the styles like I do in Dev tools - I tried manually overriding the style of the elements in a timeout, but to no effect - or some other work around that any one knows of?
Otherwise I'll try to make some kind of test case for you.
Good work though - this makes IE look great!
----------------------
Update: So I can replicate why it happens:
This won't work:
Code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#a {
background-color:green;
border-style:solid;
border-width:1px;
border-color:black;
border-radius:8px;
behavior: url(/PIE.htc);
position:absolute;
width:200px;
height:200px;
}
#b {
border-radius:8px;
behavior: url(/PIE.htc);
background-color:red;
border-style:solid;
border-width:1px;
border-color:black;
position:absolute;
width:100px;
height:100px;
top:50px;
left:50px;
}
</style>
</head>
<body>
<script type='text/javascript'>
var d1 = document.createElement("div")
document.body.appendChild(d1)
var d2 = document.createElement("div")
d1.appendChild(d2)
d1.id = "a";
d2.id = "b";
</script>
</body>
</html>
But if add the ids before the appendChild calls, then it will be fine. Unfortunately, its a big existing library that I am working with that is adding the class that is being used for my elements after creation. So - can I refresh the styles somehow after I set the id/classname of an element?
-------------------
Update #2
I seem to have solved the issue; this seems to do the trick:
setTimeout(function () {d1.style.behavior="url(/dwsApps-v2/PIE.htc)";}, 10)
I'm not sure if that's entirely valid javascript/dom calls - my library does this for me using our own functions, but you get the idea!
Forums
