Forums
View unanswered posts | View active topics It is currently Sat Apr 19, 2014 11:04 am



Reply to topic  [ 2 posts ] 
 PIE dissapears when load completes for some CSS 
Author Message

Joined: Tue Nov 30, 2010 11:58 am
Posts: 2
Post PIE dissapears when load completes for some CSS
I am using pie.htc file

I am targeting it correctly because I have an element:
HTML:
Code:
<div class="blue corner-8 shadow" id="brands-wrapper">


CSS:
Code:
.shadow{
   -moz-box-shadow:0 0 12px #CCC;
   -webkit-box-shadow:0 0 12px #CCC;
   -khtml-box-shadow:0 0 12px #CCC;
   box-shadow:0 0 12px #CCC;
   behavior: url("/*<!--{$rewriteBase}-->*/files/PIE.htc");
}
.corner-8{
   -moz-border-radius:8px;
   -webkit-border-radius:8px;
   -khtml-border-radius:8px;
   border-radius:8px;
   behavior: url("/*<!--{$rewriteBase}-->*/files/PIE.htc");
   border:1px solid #ff0099;
}   
.blue{
   background-color: #D1F2FA;
   background-image:-moz-linear-gradient(top center , #eafbfe, #c4f2fc);
   background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #eafbfe), color-stop(1.00, #c4f2fc));
   filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#eafbfe, endColorstr=#c4f2fc);
}


The shadow class works, as does the blue (I am using a filter for linear gradients, feel free to yell at me or tell me why i should/shouldn't use it and use the PIE version).
If you notice on the .corner-8 I have set a border color to pink. While the page is loading, this border is visible on the element, the border-radius is NOT applied however. On page load complete, the 1px solid #f09 border completely dissapears, yet the shadow remains.

After reading the Known issues, I tried using the position:relative, but shouldn't the effect ALL of the CSS not just specific classes? Also, am I using PIE.htc correctly? Does it need to be called per/class or per stylesheet.

i.e. could I create a <div id="page-wrapper"> that goes around the entire page and the put the behavior call on that ID for the entire page?


Tue Nov 30, 2010 12:08 pm
Profile

Joined: Wed Jul 14, 2010 11:46 am
Posts: 1430
Post Re: PIE dissapears when load completes for some CSS
elaniobro wrote:
The shadow class works, as does the blue (I am using a filter for linear gradients, feel free to yell at me or tell me why i should/shouldn't use it and use the PIE version).

I'm guessing your problem is simply due to your use of the filter. While the filter works fine for simple gradients on rectangular elements, it doesn't work in conjunction with border-radius, so it will stick out of the rounded corners and cover up the rounded border that PIE renders. If you use PIE's gradient support then the gradient image will be correctly clipped to the rounded corners. Give that a try.

elaniobro wrote:
After reading the Known issues, I tried using the position:relative, but shouldn't the effect ALL of the CSS not just specific classes?

I'm not sure what you're asking. If you have a position:relative style that matches the element, whether its by class, id, or whatever, then that's fine.

elaniobro wrote:
Also, am I using PIE.htc correctly? Does it need to be called per/class or per stylesheet.
i.e. could I create a <div id="page-wrapper"> that goes around the entire page and the put the behavior call on that ID for the entire page?

It needs to be applied to each element that needs CSS3 rendering. Applying it only to a page-wrapper would render any CSS3 styles on that particular wrapper element, but not any of its descendants.


Tue Nov 30, 2010 12:54 pm
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 2 posts ] 

Who is online

Users browsing this forum: Exabot [Bot], Yahoo [Bot] and 2 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:  
cron
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.