First time using PIE and running into a few issues...
Hi everyone,
I'm almost done with the development of a site, but have run into a few issues with it displaying in IE8. Luckily, I came across PIE today and have found it to be very helpful, although I'm still experiencing a few bugs with how it renders some CSS3, specifically border-radius and box-shadow. I have added the behavior CSS line after after item that has any CSS3 styling associated with it, but have only seen it work on the container thus far. I've checked the file path and that's correct. Have also added the AddType .htaccess thing. Here's some of the CSS that I'm using to no avail. Any help or pushes in the right direction is very much appreciated.
Code:
.universalList {
margin: 50px auto 10px auto;
position: block;
width: 600px;
background: url('images/list.jpg') repeat-x;
border: 5px solid #fff;
-moz-box-shadow: 0 0 5px 5px #c6c6c6;
-webkit-box-shadow: 0 0 5px 5px #c6c6c6;
box-shadow: #c6c6c6 0 0 5px 5px;
behavior: url(inc/PIE.htc);
}
Code:
.nav1 ul li {
font-size:12px;
float:left;
margin-right:5px;
border: 1px solid #999999;
background-color: #fafafa;
border-radius: 5px 5px 0px 0px;
box-shadow: inset 0 1px 1px #fafafa, inset 0 -15px #d7d7d7, 0 0 1px #fafafa;
-o-box-shadow: inset 0 1px 1px #fafafa, inset 0 -15px #d7d7d7, 0 0 1px #fafafa;
-webkit-box-shadow: inset 0 1px 1px #fafafa, inset 0 -15px #d7d7d7, 0 0 1px #fafafa;
-moz-box-shadow: inset 0 1px 1px #fafafa, inset 0 -15px #d7d7d7, 0 0 0px #fafafa;
color:#868686;
text-shadow: 1px 1px #fafafa;
padding: 6px 30px;
behavior: url(inc/PIE.htc);
}
Regarding the following code: Calling the PIE behavior, it prevents the background image from loading unless there is an !important attribute tacked on to the background.
Code:
#header{
width:940px;
height:120px;
background:url(images/header-bg.gif) repeat-x top left;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
behavior: url(inc/PIE.htc);
}
Forums
