CSS3 and PIE not working in IE 8

Question

Im trying to demo CSS3PIE and it wont work in IE at all.

HTML:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <link href="test.css" type="text/css" rel="stylesheet">
  <title>Test</title>
  </head>
  <body>

    <div id="title"></div>
    <div id="sub_title"></div>
    <div id="main_area">
      <div id="date_area"></div>
    </div>

  </body>
</html>

css:

body{
 margin: 0 auto;
}

#title{
 margin: 0 auto;
 width: 100%;
 height: 40px;
 background-color: white;
}

#sub_title{
  margin: 0 auto;
  width: 100%;
  height: 25px;
  background-color: green;
}

#date_area{
  width: 310px;
  height: 250px;
  border: 1px solid #4A4949;
  padding: 60px 0;
  text-align: center; 
  -webkit-border-radius: 1px;
  -moz-border-radius: 1px;
  border-radius: 1px;
  -webkit-box-shadow: #707070 2px 2px 4px;
  -moz-box-shadow: #707070 2px 2px 4px;
  box-shadow: #707070 2px 2px 4px;
  background: #EBEBEB;
  background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EDEBEB), to(#C9C7C8));
  background: -moz-linear-gradient(#EDEBEB, #C9C7C8);
  background: linear-gradient(#EDEBEB, #C9C7C8);
  -pie-background: linear-gradient(#EDEBEB, #C9C7C8);
  behavior: url(/PIE.htc);  
}

The result is just a block with a border, no gradient/shadow etc

Any help/solution would be much appreciated.

Any reason to not using `filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EDEBEB', endColorstr='#C9C7C8',GradientType=0 );`? — Linus Unnebäck, Jul 20 '11 at 06:07

Alejandro García Iglesias · Accepted Answer · 2013-05-15T18:21:17.083

34

The behavior location should be relative to your HTML file, not your CSS like any other declaration using url(). So assuming your index.html and PIE.htc is in root and your CSS is inside a 'css' folder, you should go like this:

background-image: url(../images/example.jpg);
behavior: url(PIE.htc);

Also, try adding a .htaccess file with the following content in the same location as the PIE.htc file:

AddType text/x-component .htc

Hope this helps.

edited May 15 '13 at 18:21

answered Jan 12 '11 at 19:13

Alejandro García Iglesias

16,222
11
51
64

That fixed it in IE10 for IE8 compatibility mode, but not in the real IE8...any ideas? – DrCord Aug 16 '13 at 17:23
@DrCord wow, didn't knew that... Not sure of that since i'm currently not relying on CSS3PIE anymore. I'm supporting IE8+ and i code a solid layout structure; regarding "fancy visual effects": what works on IE, works on IE, and what doesn't, no big deal, design looks good anyways. – Alejandro García Iglesias Aug 20 '13 at 22:17

score 14 · Answer 2 · edited May 23 '17 at 10:29

14

Try adding

position:relative;
z-index: 0;

as suggested here http://css3pie.com/forum/viewtopic.php?f=3&t=10

This question is similar to the one posted here: CSS3 PIE - Giving IE border-radius support not working?

edited May 23 '17 at 10:29

Community

1
1

answered Jan 13 '11 at 23:38

Daniel Rehner

1,771
12
8

^ this guy is a life saver ! – Udy Warnasuriya Feb 27 '13 at 10:43
for me, adding z-index:0 removed the text inside the element. however, adding just position:relative really helped – user151496 Jul 30 '13 at 08:56

score 4 · Answer 3 · edited May 23 '17 at 12:10

4

CSS3 PIE - Giving IE border-radius support not working?

The PIE.htc requests should respond with the mime type "text/x-component" - or IE won't touch the behaviour.

edited May 23 '17 at 12:10

Community

1
1

answered Jan 12 '11 at 00:22

drudge

35,471
7
34
45

Tom · Answer 4 · 2011-12-12T21:33:08.840

4

adding: AddType text/x-component .htc - to the .htaccess file worked like a charm for me.

The shorthand CSS property let's you control what corners to round or not.

border-radius: 0 15px 15px 0;/*(top-left, top-right, bottom-right, bottom-left). */

edited Dec 12 '11 at 21:33

answered Dec 12 '11 at 20:28

Tom

41
2

score 2 · Answer 5 · answered Dec 02 '11 at 10:00

2

Try to clear cache in your browser. Especialy when you switch between compatibility modes. It really helps

answered Dec 02 '11 at 10:00

cmms

21
1

2

This should be as comment not an answer. – Janak Nirmal Nov 05 '12 at 11:11

score 0 · Answer 6 · answered Jan 11 '11 at 23:01

0

Make sure you have the latest beta release. If the HTC file still causes issues, try the JS implementation.

answered Jan 11 '11 at 23:01

Adam

23
6

CSS3 and PIE not working in IE 8

6 Answers6

Linked