linear-gradient using CSS3 PIE in IE9 not working, IE8 does - css

I've decided to completely drop support for IE6 and IE7 in my website, redirecting it's users to a text-only warning page. However I still support IE8 and IE9.
I am achieving this using CSS3 PIE, and border-radius works in both (IE8/9), box-shadow works in both, however I also rely on linear-gradient. I have heaps of tags in use to achieve this:
background: #E6E6E6; /* fallback */
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#E6E6E6), to(#B3BCC7)); /* old webkit */
background: -webkit-linear-gradient(#E6E6E6, #B3BCC7); /* new webkit */
background: -moz-linear-gradient(#E6E6E6, #B3BCC7); /* firefox */
background: -ms-linear-gradient(#E6E6E6, #B3BCC7); /* meant to be IE... */
background: filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#E6E6E6', endColorstr='#B3BCC7'); /* also meant to be IE... */
background: -o-linear-gradient(#E6E6E6, #B3BCC7); /* opera */
background: linear-gradient(#E6E6E6, #B3BCC7); /* W3C standard */
-pie-background: linear-gradient(#E6E6E6, #B3BCC7); /* PIE */
behavior: url(/PIE.htc); /* load PIE.htc */
linear-gradient works in IE8, but not IE9, oddly. I've tried any solutions I've found, but they haven't worked. IE8 just shows the fallback: background: #E6E6E6; - not a gradient.
I don't think it's anything wrong with the server or anything like that, because the other properties - border-radius and box-shadow - work with PIE but not without.
I've got all the properties to work in all browsers I support - just not IE9 :(
Any ideas?
Thanks

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.

I don't think it's anything wrong with the server or anything like that, because the other properties - border-radius and box-shadow - work with PIE but not without.
PIE does not render border-radius and box-shadow in IE9 since IE9 supports both of those natively. So their presence is not an indication that PIE is working.
My guess is actually that your PIE.htc is being served with the incorrect content-type header -- IE9 is particularly strict about the content-type. See http://css3pie.com/documentation/known-issues/#content-type for details.

I was having a big headache because even with the correct content-type header (text/x-component), the linear-gradient wasn't working on IE9.
Upgrading to PIE 2.0 solved the issue.
http://css3pie.com/2013/01/28/pie-2-0-beta-1-released

Great!
i used PIE.php and fixed this bug (linear-gradient + border-radius) in IE8, IE9!
To use it, simply make sure both PIE.php and PIE.htc are in the same directory, and then in your CSS point the behavior to the PHP file instead:
behavior: url(PIE.php);

ie9-gradient-fix.htc worked for me in I.E. 9 but then again changing behavior from pie.htc to pie.php ALSO does the same thing.
The wheels turn oh so slowly at Microsoft but it appears they might also turn in opposite directions?

In my case i was using <!--[if lt IE 9]>, changing it to <!--[if lt IE 10]> fixed my problem (of not actualy including my IE css file).
I think** <!--[if lte IE 9]> would do the same logic.
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#88222222', EndColorStr='#00222222', GradientType=0);
PS. I am not using css3pie whatsoever (I thought I was, derp)

Related

Different colours being displayed for different versions of IE

I am facing an issue with CSS styles in ROR application in IE 9 and below versions.
It is displaying orange color (#ff5b09)when > IE 9 and also in firefox, but taking grey color (#666) for <= IE9.
I need to make the IE 9 and below versions also display the orange color (#ff5b09). Please suggest. I am new to ROR. appreciate any help on the same.
CSS is making use of filters.
Style related to it is as following:
.ui-sortable .lesson, .boxy-inner .block.lesson, .router .slider .lesson
{
background-color: #666;
background: -webkit-gradient(linear, left top, left bottom,
from(#ff5b09), to(#f93d1e));
background: -moz-linear-gradient(top, #ff5b09, #f93d1e);
/* MSIE */
filter: progid:DXImageTransform.Microsoft.Gradient(
StartColorStr='#ff5b09', EndColorStr='#f93d1e', GradientType=0);
}
background-color: #666;
Do you need this color(#666)?
if you don't then replace it with #ff5b09.
If you need it, then try this: put above statement at the end of all styles, some IE browser versions ignore all filters and gradients once they hit the background-color style. So, having it at the top could be causing issues.

Css behavior on different browsers

I'm trying to fix something in css of my project but the behavior of that button is different on IE8. So this is the code:
.virtualS{
background: -moz-linear-gradient(top, #FF734C, #FF0000);
background: -webkit-linear-gradient(top, #FF734C, #FF0000);
background: -o-linear-gradient(top, #ff704a 0%,#ff0201 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FF734C, endColorstr=#FF0000);
border:1px solid #eaeaea;
height:14px;
}
the problem is with height:14px because on Firefox, Chrome, Opera I should have 16px and on IE 14px. So what can I do in order to fix this? I don't want to use a different .css file with conditional comments only for this so what can I do in order to have properly the same height for that button on IE and Firefox.
I think if you want 14px you might need to set line-height: 14px
Although it is not W3C compliant the are 'hacks' you can use in your css to target specific browsers, the compliant way would be to use <!-- [if IE x]> <link ... /> <![endif] --> these 'special comments' are recognised by IE and it loads the appropriate style sheet
Check to see if IE is rendering in quirks mode, if it is, the sizing will be incorrect. But it can be fixed by correcting the HTML.

background gradients in IE7 with CSS

I am using the following bit of CSS to create a linear background gradient. It seems to work just fine in IE8/9, FF, Safari and chrome but not in IE7. IE7 shows a solid (green) background. Here is my code
.menu_body a {
display:block;
color:#006699;
background: #008800;
/* Mozilla: */
background: -moz-linear-gradient(top, #0b71a4, #025f8e);
/* Chrome, Safari:*/
background: -webkit-gradient(linear,
left top, left bottom, from(#0b71a4), to(#025f8e));
/* MSIE */
filter: progid:DXImageTransform.Microsoft.Gradient(
StartColorStr='#0b71a4', EndColorStr='#025f8e', GradientType=0);
padding: 1px 18px;
}
In IE<=7, filters won't work unless element has layout.
zoom: 1;
Be aware that it can break other things, so old good background-image might be safe and reliable solution.
Also please note that your CSS lacks gradient properties for Opera, IE10 and updated syntax for Webkit.
The correct syntax is:
filter: progid:DXImageTransform.Microsoft.gradient
(startColorstr=#550000FF, endColorstr=#55FFFF00)
This is supported by IE4>
See the MSDN source here.
I'm unsure if the parameters of this transform are case sensitive - but seeing as most other CSS is, you could try:
startColorstr='#0b71a4', endColorstr='#025f8e'
Notice the lower-case starting character, and lower-case str suffix.

CSS background opacity with rgba not working in IE 8

I am using this CSS for background opacity of a <div>:
background: rgba(255, 255, 255, 0.3);
It’s working fine in Firefox, but not in IE 8. How do I make it work?
To simulate RGBA and HSLA background in IE, you can use a gradient filter, with the same start and end color (alpha channel is the first pair in the value of HEX)
background: rgba(255, 255, 255, 0.3); /* browsers */
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#4cffffff', endColorstr='#4cffffff'); /* IE */
Create a png which is larger than 1x1 pixel (thanks thirtydot), and which matches the transparency of your background.
EDIT : to fall back for IE6+ support, you can specify bkgd chunk for the png, this is a color which will replace the true alpha transparency if it is not supported. You can fix it with gimp eg.
I believe this is the best because on this page has a tool to help you generate alpha-transparent background:
"Cross browser alpha transparent background CSS (rgba)" (*now linked to archive.org)
#div {
background:rgb(255,0,0);
background: transparent\9;
background:rgba(255,0,0,0.3);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cFF0000,endColorstr=#4cFF0000);
zoom: 1;
}
the transparent png image will not work in IE 6-, alternatives are:
with CSS:
.transparent {
/* works for IE 5+. */
filter:alpha(opacity=30);
/* works for IE 8. */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
/* works for old school versions of the Mozilla browsers like Netscape Navigator. */
-moz-opacity:0.3;
/* This is for old versions of Safari (1.x) with KHTML rendering engine */
-khtml-opacity: 0.3;
/* This is the "most important" one because it's the current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. */
opacity: 0.3;
}
or just do it with jQuery:
// a crossbrowser solution
$(document).ready(function(){
$(".transparent").css('opacity','.3');
});
Though late, I had to use that today and found a very useful php script here that will allow you to dynamically create a png file, much like the way rgba works.
background: url(rgba.php?r=255&g=100&b=0&a=50) repeat;
background: rgba(255,100,0,0.5);
The script can be downloaded here: http://lea.verou.me/wp-content/uploads/2009/02/rgba.zip
I know it may not be the perfect solution for everybody, but it's worth considering in some cases, since it saves a lot of time and works flawlessly. Hope that helps somebody!
There are mostly all browser support RGBa code in CSS but only IE8 and below level does not support RGBa css code. For This here is solution. For The solution you must follow this code and it’s better to go with it’s sequence otherwise you will not get perfect output as you wish. This code is used by me and it’s mostly perfect. make comment if it’s perfect.
.class
{
/* Web browsers that does not support RGBa */
background: rgb(0, 0, 0);
/* IE9/FF/chrome/safari supported */
background: rgba(0, 0, 0, 0.6);
/* IE 8 suppoerted */
/* Here some time problem for Hover than you can use background color/image */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000, endColorstr=#88000000)";
/* Below IE7 supported */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000, endColorstr=#88000000);
}
You use css to change the opacity. To cope with IE you'd need something like:
.opaque {
opacity : 0.3;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
}
But the only problem with this is that it means anything inside the container will also be 0.3 opacity. Thus you'll have to change your HTML to have another container, not inside the transparent one, that holds your content.
Otherwise the png technique, would work. Except you'd need a fix for IE6, which in itself could cause problems.
I'm late to the party, but for anyone else who finds this - this article is very useful:
http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/
It uses the gradient filter to display solid but transparent colour.
To use rgba background in IE there is a fallback.
We have to use filter property. that uses ARGB
background:none;
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ffffff,endColorstr=#33ffffff);
zoom: 1;
this is fallback for rgba(255, 255, 255, 0.2)
Change #33ffffff according to yours.
How to calculate ARGB for RGBA
this worked for me to solve the problem in IE8:
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
Cheers
This solution really works, try it. Tested in IE8
.dash-overlay{
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)";
}
It is very simply you have to give first you have to give backgound as rgb because Internet Explorer 8 will support rgb instead rgba and then u have to give opacity like filter:alpha(opacity=50);
background:rgb(0,0,0);
filter:alpha(opacity=50);
This a transparency solution for most browsers including IE x
.transparent {
/* Required for IE 5, 6, 7 */
/* ...or something to trigger hasLayout, like zoom: 1; */
width: 100%;
/* Theoretically for IE 8 & 9 (more valid) */
/* ...but not required as filter works too */
/* should come BEFORE filter */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/* This works in IE 8 & 9 too */
/* ... but also 5, 6, 7 */
filter: alpha(opacity=50);
/* Older than Firefox 0.9 */
-moz-opacity:0.5;
/* Safari 1.x (pre WebKit!) */
-khtml-opacity: 0.5;
/* Modern!
/* Firefox 0.9+, Safari 2?, Chrome any?
/* Opera 9+, IE 9+ */
opacity: 0.5;
}
The best solution I found so far is the one proposed by David J Marland in his blog, to support opacity in old browsers (IE 6+):
.alpha30{
background:rgb(255,0,0); /* Fallback for web browsers that don't support RGBa nor filter */
background: transparent\9; /* backslash 9 hack to prevent IE 8 from falling into the fallback */
background:rgba(255,0,0,0.3); /* RGBa declaration for browsers that support it */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4cFF0000,endColorstr=#4cFF0000); /* needed for IE 6-8 */
zoom: 1; /* needed for IE 6-8 */
}
/*
* CSS3 selector (not supported by IE 6 to IE 8),
* to avoid IE more recent versions to apply opacity twice
* (once with rgba and once with filter)
*/
.alpha30:nth-child(n) {
filter: none;
}
After searching a lot, I found the following solution which is working in my cases:
.opacity_30{
background:rgb(255,255,255); /* Fallback for web browsers that don't support neither RGBa nor filter */
background: transparent\9; /* Backslash 9 hack to prevent IE 8 from falling into the fallback */
background:rgba(255,255,255,0.3); /* RGBa declaration for modern browsers */
-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFFFFFF,endColorstr=#4CFFFFFF); /* IE 8 suppoerted; Sometimes Hover issues may occur, then we can use transparent repeating background image :( */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4CFFFFFF,endColorstr=#4CFFFFFF); /* needed for IE 6-7 */
zoom: 1; /* Hack needed for IE 6-8 */
}
/* To avoid IE more recent versions to apply opacity twice (once with rgba and once with filter), we need the following CSS3 selector hack (not supported by IE 6-8) */
.opacity_30:nth-child(n) {
filter: none;
}
*Important: To calculate ARGB(for IEs) from RGBA, we can use online tools:
https://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/
http://web.archive.org/web/20131207234608/http://kilianvalkhof.com/2010/css-xhtml/how-to-use-rgba-in-ie/

Want to replace DXImageTransform to make FireFox/Chrome Compatible

The following piece of code does not work on FF and Chrome but works on IE. I want to replace this part to make sure it works on all browsers.
Anybody, any idea?
Code below:
<td width="50%" style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#163866,endColorStr=#8bc9f3); HEIGHT: 38px;">
td {
background: -webkit-gradient(linear, left top, left 38, from(#163866), to(#8bc9f3));
background: -moz-linear-gradient(top, #163866, #8bc9f3 38px);
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#163866,endColorStr=#8bc9f3)
height: 38px;
}
This will work in FF 3.6+, Safari 4+, Chrome, and IE 6+ (I think that supports gradient filters). Each browser will ignore the declarations it doesn't understand, so having all 3 will support all major browsers. Opera doesn't yet support gradients, instead use SVG (Scalable Vector Graphics)
Firefox Gradient documentation
Webkit (Safari/Chrome) Gradient documentation
Opera Gradients

Resources