Question

I have a container that I’m applying curved corners to with css3pie. Inside that element I have a table that is wider than the container. This causes scroll bars at the bottom of the container which is what I not only expect but need. The issue is that if I have applied css3pie to the container the scroll bar will not scroll when clicked and dragged. I can click on the arrows at both ends and it will scroll or I can click in the space where the scroll bar is not and it will jump to that place. So it only will not scroll when I click and drag the scroll bar.

If I comment out the bahaivor on the class for the container scrolling will work again. If I apply css3pie though javascript scrolling will break. If I remove the class from the container while pie is enabled as a behavior scrolling works.

I have also put the table inside another div inside the container with the same results.

I’m running in IE9 documents mode IE7

Is there any way to correct this issue?

Answer 1

So I never found an explanation about why this was happening. I believe that scrolling the content inside the page element with PIE applied would cause the style to be reapplied causing the “Behavior:” to be evoked and stopping the scroll event.

I ended up solving the issue by taking the content i needed to apply the scroll to our of the element with pie applied. In my case I was applying rounded corners to the container that the scroll bars were inside. I put a div above and below the content and applied the corner rounding to the top and bottom divs.

This way the scroll bars would work normally, and the rounded corners would be applied. Though yet again there was a work around for IE7.