Search code examples
cssinternet-explorer-8css3pie

PIE CSS works in IE9 but not IE8

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?

Solution

  • 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.