Forums
View unanswered posts | View active topics It is currently Wed May 22, 2013 11:11 am



Reply to topic  [ 9 posts ] 
 Any idea why Pie isn't working with this code... 
Author Message

Joined: Wed Jan 18, 2012 9:31 am
Posts: 5
Post Any idea why Pie isn't working with this code...
Code:
#content #block8e {
   width:927px;
   height:625px;   
   padding:0px;
   margin:0 auto;
   border:1px solid #f60;
   background-color:rgba(255,255,126,0.85);
   border-radius:25px;
   -moz-border-radius:25px; /* Firefox 3.6 and earlier */
   box-shadow: 10px 10px 5px #888888;
   filter:alpha(opacity=85); /* For IE8 and earlier */
   behavior: url(PIE.htc);
}


I'm a newbie when it comes to css but as far as I know everything that can be in shorthand is in shorthand.
The pie.htc file is located in the same directory as the html document.
:?: :?:


Wed Jan 18, 2012 9:38 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1396
Post Re: Any idea why Pie isn't working with this code...
Please be more specific as to what you mean by "not working". Is it doing nothing? Rendering partially or incorrectly?

Make sure you've checked all the common issues: http://css3pie.com/documentation/known-issues/


Wed Jan 18, 2012 12:52 pm
Profile

Joined: Wed Jan 18, 2012 9:31 am
Posts: 5
Post Re: Any idea why Pie isn't working with this code...
What I mean is that there is no change.

I did read through the known issues prior to posting and the only thing I can think of is that there is some z-index in the style sheet, although not in the document itself and I didn't assign the pie behavior to it.

I just thought I'd post anyway to see if there was something obviously wrong with it.

I don't need upload any other files in the distribution, right? Just the htc file?


Thu Jan 19, 2012 12:33 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1396
Post Re: Any idea why Pie isn't working with this code...
Yes the htc is all you need. If you're seeing no change then my guess would be the content-type issue or the relative path issue. If you can post a link to the page in question then one of us could take a look, but double check those two first.


Thu Jan 19, 2012 10:36 pm
Profile

Joined: Wed Jan 18, 2012 9:31 am
Posts: 5
Post Re: Any idea why Pie isn't working with this code...
Here is a shortened link to one of the pages.
http://bit.ly/zoTvjf

The semi-transparent pale yellow background (block8) has CSS3 decoration- rounded corners, drop shadow, transparency. What I'm most concerned about is having the thing at least show up, which it doesn't do in IE8 or lower, so people can read the text. I could sacrifice the rounded corners and drop shadow for IE users but would still like it to be there for people with more capable browsers.


Sun Jan 29, 2012 8:51 am
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1396
Post Re: Any idea why Pie isn't working with this code...
Like I suggested earlier, your content-type is wrong. http://www.rocketsigns.com/v12/PIE.htc is being served with a content-type of text/plain.

In addition, you are running into the common z-index issue described on the known issues page; your element needs position:relative to get around that.

In addition, you are specifying an rgba value for the 'background-color' property -- this will not work as PIE cannot read it. See http://css3pie.com/documentation/suppor ... background

In addition, you'll need to be aware of https://github.com/lojjic/PIE/issues/12 which will cause the box-shadow to display through your semi-transparent background. You'll need to either nix the shadow, or make the background-color fully opaque.

Finally, your filter:alpha(opacity=85) style will not work as you expect, see https://github.com/lojjic/PIE/issues/46


Sun Jan 29, 2012 2:07 pm
Profile

Joined: Wed Jan 18, 2012 9:31 am
Posts: 5
Post Re: Any idea why Pie isn't working with this code...
Thanks for reviewing it.

Are all of those things going to need to be fixed in order for that background to at least show up. Opaque is fine.

Initially it was all filter opacity but it was changed to RGBA because everything, including the images had become transparent as it was inheriting the property.

The z-index is only used on the home page I believe and changing the position type may have unintended consequences. I suppose I can use a separate CSS file for that element(s), can't I?


Sun Jan 29, 2012 3:45 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1396
Post Re: Any idea why Pie isn't working with this code...
You'll need to fix at least the content-type, the z-index issue, and the rgba value.

Looking at your layout I don't see anything that would be adversely affected by adding position:relative -- the only thing it would affect would be absolute-positioned descendants but you don't seem to have any.

Regardless you should add a fallback background-color for browsers that don't know rgba.


Sun Jan 29, 2012 6:49 pm
Profile

Joined: Wed Jan 18, 2012 9:31 am
Posts: 5
Post Re: Any idea why Pie isn't working with this code...
Thanks so much for your help.

I just added
Code:
filter:progid:DXImageTransform.Microsoft.gradient(
startColorstr=#ffff7e,endColorstr=#99ffff7e);


I don't have the rounded corners or drop shadow but at least I have the background color and some transparency- sorta.

When time permits, I'll experiment with PIE again.


Sun Jan 29, 2012 8:10 pm
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 9 posts ] 

Who is online

Users browsing this forum: Bing [Bot], Google [Bot] and 4 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.