CSS3 PIE Trouble with IE 6-7-8

[jmeyer0911]

I am using a PIE Gradient 4 rounded corner:

div.containerBody

{

border: 0px solid;

padding: 50px 0 0 0;

text-align: left;

margin-left: auto;

margin-right: auto;

width: 991px;

-webkit-border-radius: 8px;

-moz-border-radius: 8px;

border-radius: 8px;

-webkit-box-shadow: #666 0px 2px 3px;

-moz-box-shadow: #666 0px 2px 3px;

box-shadow: #666 0px 2px 3px;

background: #F0F5D6;

background: -webkit-gradient(linear, 0 0, 0 bottom, from(#F0F5D6), to(#7EF651));

background: -webkit-linear-gradient(#F0F5D6, #7EF651);

background: -moz-linear-gradient(#F0F5D6, #7EF651);

background: -ms-linear-gradient(#F0F5D6, #7EF651);

background: -o-linear-gradient(#F0F5D6, #7EF651);

background: linear-gradient(#F0F5D6, #7EF651);

-pie-background: linear-gradient(#F0F5D6, #7EF651);

}

this works great in Firefox, Chrome, IE9.
when looking and reading the PIE web site, it states to use this:

behavior: url('PIE/PIE.htc');

So, I added that to my css, but when looking at the web site in compatible mode, it still makes everything as a box and my navigation (which are round buttons that sit over the head container and the main body content (the body content, or the div.containerBody) all shifted to the right.
Here is my html for the building blocks:

s

I hope someone understands

[Vermaas]

Well first of all, the reason why this works in Firefox etc, is because those browsers supports the background gradient.

Second of all, there’re a several reasons why this might not work. First is: wrong including. What is the location, the exact location, of the pie.htc file? If the style.css (or something like that) is located in the root folder and the pie.htc is in the pie folder. The including should look like this:

* {

behavior: url(pie/PIE.htc);

}

When the style.css is located in the folder stylesheet, it should look like this:

* {

behavior: url(../pie/PIE.htc);

}

If you applied the above code, and the PIE script still doesn’t work, the server might be the problem. Instead of including PIE.htc, you could include PIE.php. Make sure that the PIE.htc is in the same folder as the PIE.php folder.

If you’re dutch, you might like my blogpost about PIE: CSS3PIE handleiding

[Author]

Posts