Internet Explorer 9 & 10 CSS bug with overflow-y?

I ran into an interesting problem, maybe a bug, in Internet Explorer 10 (and IE9) today.  Basically, if I had the following styles applied to the HTML tag, and then collapsed sections of the page with JavaScript, the height of the page would not collapse along with the content, ending up with significant white space left at the bottom of the document after collapsing large page sections.  Removing either of the styles fixed the problem, but the combination didn’t work properly.

html { 
    height: 100%;
    overflow-y: scroll;

I tried various combinations of styles to fix it, but in the end I had to remove the overflow-y style with JavaScript before expanding or collapsing content, and then reapplying it after the animation is complete.   As the problem didn’t affect standard’s compliant non-IE browsers, I added a class during animation and only applied the style to remove the overflow-y property to IE9 and IE10.

Read more

Border radius inset or inverted rounded corners

At work today I was asked if it was possible to make inverted rounded corners on an element using CSS3, and it was a fun little challenge.  I thought maybe I would find that border radius has an “inset” property that can be applied, and the W3C probably should have considered adding that.  Ah well, it still turned out to be relatively simple, and I thought I’d document in case it can help anyone else.

Read more