CSS3 and PIE not working in IE 8
Solution 1
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.
Solution 2
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?
Solution 3
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.
Solution 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). */
Solution 5
Try to clear cache in your browser. Especialy when you switch between compatibility modes. It really helps
Julio
Updated on May 16, 2020Comments
-
Julio almost 4 years
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.
-
Janak Nirmal over 11 yearsThis should be as comment not an answer.
-
Udy Warnasuriya about 11 years^ this guy is a life saver !
-
user151496 almost 11 yearsfor me, adding z-index:0 removed the text inside the element. however, adding just position:relative really helped
-
DrCord over 10 yearsThat fixed it in IE10 for IE8 compatibility mode, but not in the real IE8...any ideas?
-
Alejandro García Iglesias over 10 years@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.