Scroll bug in ie7 and ie9 when using css3pie gradient
nevermind, it seems you have to add the -pie-track-active:false to all ancestor elements that use a PIE behavior
linear-gradient using CSS3 PIE in IE9 not working, IE8 does
OK, here's my fix. It certainly isn't pretty, but it works.
<style type="text/css">
body{
background: #E6E6E6;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#E6E6E6), to(#B3BCC7));
background: -webkit-linear-gradient(#E6E6E6, #B3BCC7);
background: -moz-linear-gradient(#E6E6E6, #B3BCC7);
background: -ms-linear-gradient(#E6E6E6, #B3BCC7);
background: -o-linear-gradient(#E6E6E6, #B3BCC7);
background: linear-gradient(#E6E6E6, #B3BCC7);
-pie-background: linear-gradient(#E6E6E6, #B3BCC7);
behavior: url(/PIE.htc);
}
</style>
<!--[if IE 9]><style>body{ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#E6E6E6', endColorstr='#B3BCC7'); behavior: url(/ie9-gradient-fix.htc); } </style><![endif]-->
EDIT: If anybody wants them, PIE.htc is found at http://www.css3pie.com and ie9-gradient-fix.htc is found at http://abouthalf.com/examples/ie9roundedbackgrounds/htc.zip. I couldn't get ie9-gradient-fix.htc to work unless it was in the root directory, PIE.htc worked in my /resources/ directory.
css3pie - scrollbars not working inside element with pie applied
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.
ie9 not rendering bottom part of background gradient
for me I will use .SVG to render for IE9
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Q2ZGFlMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3NDkwYTAiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
I will recommend you to use : http://www.colorzilla.com/gradient-editor/
Related Topics
Styling Part of The Text in The Placeholder
How to Select Multiple Ids in CSS
Compact Arrangement of Divs in Two Directions
Change in Doctype Causes Webpage to Render Differently
How Do Display a Boostrap/Angularui Alert Always on Top
CSS Selector: How to Style Items [1-2][5-6][9-10] etc by Pair
Custom Fields for Shopify User Registration Form
How to Make a Div Adopt The Height of The Screen
How to Replace @Media (Max-Width) Using Stylish or Greasemonkey
How to Use Calibri Font in Linux and Mac
Why <Big> Is Not in HTML 5 Tag List While <Small> Is
Change Div Order on Responsive Design
Ie8 Ignores Td Width, Works on Ie7
How to Avoid Content of Span Break in Two Lines
How to Style The Drop-Down Suggestions When Using HTML5 <Datalist>
Select Second Active Slide in Slickslider Through CSS-Selector