Pie CSS Works in Ie9 But Not Ie8

PIE CSS works in IE9 but not IE8

I too faced the same issue and following was the reason for my problem:

  • I used a wrong positioning for my DIV element.
  • I was targeting the wrong path in behavior.

From your code, the problem seems to be in targeting the wrong path.

behavior: url(/owmw/web/css/PIE.htc);

FIX:
Instead try to refer the PIE.htc file in css folder and make it look like behavior: url(PIE.htc);
or

use behavior: url(owmw/web/css/PIE.htc);

Check out behavior property.

I might be wrong, but this solved my issue.

Even I tried using behavior: url(../owmw/web/css/PIE.htc); but not worked.

From your comments, it seems you're using X-UA-Compatible as a fix and it works only through IE10 compatibility mode.

!--  Force IE to use the latest version of its rendering engine -->  
<meta http-equiv="X-UA-Compatible" content="IE=edge">

By telling IE to use the latest version of its rendering engine in your page.
Incase if your user opens in IE8 browser? This will certainly fails.

You can check this in MSDN Library.

Hope you understand.

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.

CSS works in IE11 but not in IE8

there are two ways to handle it (css3 properties like box-shadow, border-radius won't be supported in ie8).
1) you can use hacks for ie8 :
To target Internet Explorer 8 and below in CSS, append “9” to the end of the style you want to apply. e.g.

div {
border: 2px solid #aaa; /* for all browsers */
border: 2px solid #f009; /* IE8 and below - red border */
}

.element {
margin-bottom: 20px;
margin-bottom: 10px\9; /* IE8 */
}

2) using conditional statements from within your HTML :

 <!--[if lte IE 9]>
Your IE8 and below HTML code here.
Perhaps importing a specific style sheet.
<![endif]-->

e.g :

<!--[if lte IE 7]> <html class="ie7"> <![endif]-->
<!--[if IE 8]> <html class="ie8"> <![endif]-->
<!--[if IE 9]> <html class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html> <!--<![endif]-->

styles :

.element {
margin-bottom: 20px;
}

.ie7 .element {
margin-bottom: 10px;
}

.ie8 .element {
margin-bottom: 15px;
}

CSS3 Pie Not Working in IE8

As @Spudley mentioned in a comment above the issue was a z-index issue as described on the CSS3 PIE Website:

Disappearing backgrounds/borders/shadows (z-index issues)

First, a little background on how PIE renders CSS3 decorations: a single element is created which holds all the VML objects. This container element is inserted as a previous sibling to the target element, and absolutely positioned at the same coordinates. If the target element is position:absolute or position:relative, then the css3-container element is given the same z-index as the target element, and since it is a previous sibling in the DOM tree it gets displayed behind, with no possibility of any other element sneaking in between.

However, this does not work so well when the target element is position:static, because static elements do not participate in z-index stacking. The only way to make our position:absolute css3 element go behind it is to give it z-index:-1. Unfortunately, this has a bad side-effect: not only will the css3 element go behind the target element, it will also go behind the background of any ancestor element(s) which are themselves position:static. This leads to situations in which PIE creates the VML rendering correctly but it disappears behind a parent element's background.

The only way I know of to work around this is to either:

     make the target element position:relative, or
make the ancestor element position:relative and give it a z-index.

Both of these workarounds can have potential unwanted side-effects in terms of child element positioning and z-index stacking. PIE could easily force one or the other itself, but:

One or the other may be more appropriate depending on the particular situation, so the CSS author needs to be able to control which one gets chosen.
Forcing position:relative outside of the CSS would put IE out of sync with other browsers, leading to confusing inconsistencies.

PIE therefore does neither, and it is up to the author to implement either workaround where necessary. In most cases simply adding position:relative to the target element is fine.

The solution can cause other issues. I ended up asking myself is it worth the hassle to create rounded corners? For some sites, yes it would be, for others, well it is your choice.

How to load css3 pie only for ie7 and 8? But not for 9

behavior is not a valid CSS property and will be ignored by browsers other than Internet Explorer. They will not download the PIE.htc file.

You mention you cannot load in conditional comment, but if you can use conditional comments (?), then you can do the following trick:

<!doctype html>
<!--[if IE 7]><html class="ie7"><![endif]-->
<!--[if IE 8]><html class="ie8"><![endif]-->
<!--[if gt IE 8]><!--><html><!--<![endif]-->
<head>

In this case you are using conditional comments, but you are not loading anything inside the comments. You are merely adding a browser-specific class to the <html>-element. Now you can do this in your CSS:

.some-class {
border-radius: 12px;
}
.ie7 .some-class, .ie8 .some-class {
behavior: url(/PIE.htc);
}

CSS3Pie v1.0 - No gradients in IE9, works in IE8

Failure in IE9 is usually due to an incorrect content-type header. Other IE versions have this issue as well but IE9 seems to be more strict about it. See http://css3pie.com/documentation/known-issues/#content-type for details.

Missing PIE linear-gradient behavior in IE8 (but working in IE7 and IE9)

Thanks to the insights from @FelipeAls and @Spudley in the comments, I was able to resolve the situation.

Using @FelipeAls suggestion, I hardcoded the class into WordPress' menu editor, and removed the JavaScript which applied the class. This helped ensure the class was being applied and the PIE behavior rendered. But, the problem remained.

@Spudley was on the right track, and it led me to find this known issues doc for PIE. It was as simple as adding position: relative; to #navigation li.last.

#navigation li.last {
[...]
position: relative;
}

I don't know how I missed this as I was actually on the Known Issues page earlier today trying to diagnose why v2.0 was not recognizing custom JavaScript paths.

Thanks everyone for your help!



Related Topics



Leave a reply



Submit