Best IT Recipes

CSS3 and PIE do not work in IE 8

Im trying a CSS3PIE demo and it will not 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 highly appreciated.

+16
html internet-explorer css3 css3pie
Jan 11 2018-11-12T00:
source share
6 answers

The behavior location should refer to your HTML file, not your CSS, like any other declaration using url() . Suppose your index.html and PIE.htc are in the root, and your CSS is in the css folder, you should do the following:

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

Also try adding the .htaccess file with the following contents in the same place as the PIE.htc file:

 AddType text/x-component .htc

Hope this helps.

+34
Jan 12 '11 at 19:13
source share

Try to add

 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 - IE border radius support not working?

+14
Jan 13 '11 at 23:38
source share

CSS3 PIE - Providing IE border radius support not working?

PIE.htc requests must respond with the mime type "text / x-component" - or IE will not touch the behavior.

+4
Jan 12 2018-11-11T00:
source share

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

The shorthand CSS property allows you to control which corners to round or not.

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

+4
Dec 12 2018-11-12T00:
source share

Try clearing the cache in your browser. Especially when switching between compatibility modes. It really helps

+2
Dec 02 '11 at 10:00
source share

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

0
Jan 11 '11 at 23:01
source share


More articles:


All Articles