2

For this project, I am using Tomcat 7 and have configured it to serve htc with content type of text/x-component

<?xml version="1.0" encoding="UTF-8"?>
<web-app ...>
    ...
    <mime-mapping>
            <extension>htc</extension>
            <mime-type>text/x-component</mime-type>
    </mime-mapping>
</web-app>

For some reason, it works in IE9 (gradients, drop shadows, rounded corners) but not in IE8, dont see any CSS3 in effect at all. In the developer console under styles/tracxe styles, I see behavior but I don't see anything like -pie-background for example. Is that a problem?

What might be the cause, it seems wierd that it works in IE9 but not IE8. I don't suppose I need different setup or anything like that? CSS of 1 element: 

#masthead {
  background: #0E0E0E;
  background: #0e0e0e;
  background: -moz-linear-gradient(center top, #7d7d7d 0%, #0e0e0e 100%);
  background: -webkit-linear-gradient(top, #7d7d7d 0%, #0e0e0e 100%);
  background: -o-linear-gradient(top, #7d7d7d 0%, #0e0e0e 100%);
  background: -ms-linear-gradient(top, #7d7d7d 0%, #0e0e0e 100%);
  background: linear-gradient(top, #7d7d7d 0%, #0e0e0e 100%);
  -pie-background: linear-gradient(top, #7d7d7d 0%, #0e0e0e 100%);
  behavior: url(/owmw/web/css/PIE.htc);
  height: 35px;
  border: 1px solid #000000;
  color: #FFFFFF;
  position: relative;
  text-align: center;
  margin: 0px auto;
}

I am using IE10 in IE8 compatibility mode, does it matter?

Jiew Meng
  • 84,767
  • 185
  • 495
  • 805
  • You can download VM's of Windows with different versions of actual browsers. Maybe download an XP or Win7 with IE8 combo and test using that to see if it makes a difference? http://www.modern.ie/en-us/virtualization-tools#downloads – jammykam May 14 '13 at 02:19
  • Are you using one of the "official" versions from the [download page](http://css3pie.com/download/) (v1.0.0 stable, or v2.0 beta1)? Or are you using one of the branches/tags from the [GitHub project](https://github.com/lojjic/PIE) by chance? Do you see any errors or 404s in the JavaScript console/network pane? – ajp15243 May 14 '13 at 04:45
  • I am using v1 I think. But The problem appears to be fixed by using standards mode `X-UA-Compatible IE=edge`. Does IE use quirks by default? – Jiew Meng May 14 '13 at 05:43
  • Oh it appears the `X-UA-Compatible` only fixes things in IE10 compatibility mode. Maybe it makes it use IE10 renderer even though I set it to IE8 in developer tools? So the problem still exists. PIE works in IE9 but not IE8 – Jiew Meng May 14 '13 at 07:50

1 Answers1

1

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.

Praveen
  • 55,303
  • 33
  • 133
  • 164