CSS3 PIE Forums

PIE.htc doing nothing...
Page 1 of 2

Author:  dsontag [ Tue Jan 29, 2013 4:08 pm ]
Post subject:  PIE.htc doing nothing...

I am not having any luck with stable release OR v2 (my preference is v2 because it supports rgba in the gradients).

Not having any luck with my master stylesheet for the site, I made a test page to try and get things to show up - nothing (using IE8):
<!--<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">-->
<!--<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!--<!DOCTYPE html> -->
<title>CSS3 PIE Test Page</title>
#formgray, #formyel, #myElement { zoom:1; padding:5px; }
#formgray {
   border-top:2px solid #CCCCCC;
   background: -moz-linear-gradient(top, #EEEEEE, #FFFFFF), transparent;
   background: -webkit-gradient(linear, top,  color-stop(0%, #EEEEEE), color-stop(100%, #FFFFFF)), transparent;
   background: -ms-linear-gradient(top, #EEEEEE 0%, #FFFFFF 100%), transparent;
   background: -webkit-linear-gradient(top, #EEEEEE 0%, #FFFFFF 100%), transparent;
   background: -o-linear-gradient(top, #EEEEEE 0%, #FFFFFF 100%), transparent;
   background: linear-gradient(to bottom, #EEEEEE 0%, #FFFFFF 100%), transparent;
   -pie-background: linear-gradient(to bottom, #EEEEEE 0%, #FFFFFF 100%);
   behavior: url('/includes/PIE/PIE.htc');
   /*filter:progid:DXImageTransform.Microsoft.Gradient(enabled=true,GradientType=0,startColorstr=#FFEEEEEE, endColorstr=#FFFFFFFF);
   -ms-filter:"progid:DXImageTransform.Microsoft.Gradient(enabled=true,GradientType=0,startColorstr=#FFEEEEEE, endColorstr=#FFFFFFFF)";*/
#myElement {
   border:2px solid #BCBCBC;
   background: #CCC; /*fallback for non-CSS3 browsers*/
   background: -webkit-gradient(linear, 0 0, 0 100%, from(#CCC) to(#EEE)); /*old webkit*/
   background: -webkit-linear-gradient(top, #CCC, #EEE); /*newer webkit*/
   background: -moz-linear-gradient(top, #CCC, #EEE); /*old gecko*/
   background: -o-linear-gradient(top, #CCC, #EEE); /*opera 11.10+*/
   background: linear-gradient(to bottom, #CCC, #EEE); /*firefox 16+, chrome 26+, IE10+, opera 12.10+, future browsers*/
   -pie-background: linear-gradient(to bottom, #CCC, #EEE); /*ie 6-9 via PIE*/
div.render, .render {
   -webkit-font-smoothing: antialiased;
   -moz-font-smoothing: antialiased;
   -ms-font-smoothing: antialiased;
   font-smoothing: antialiased;


<h2>CSS3 PIE Test Page</h2>

<div id="myElement">
There should be a gradient in here.
<table border="0" cellpadding="5" cellspacing="0" width="100%">
<tr><td id="formgray"><div class="render">
TESTING - should be a fading gradient in here too.


Going through the known issues.....
I've added/removed/changed the z-index stuff in my master stylesheet and see no change whatsoever - no gradients show up on the page anywhere.

I believe I have this set correct - using other .htc behaviors with the same path and they work. Physical location of PIE on server is at http://INTRANET/includes/PIE/PIE.htc. I've tried to access it via URL in browser and it asks me if I'd like to download the file.

I use shorthand whereever I can.

Since I am able to use other htc behaviors, I'm assuming the server is serving up the correct type.

I've tried various DOCTYPE declarations as well as NO DOCTYPE declaration and cannot get it working. I don't know what else to try.

This is on a company intranet so it is inaccessible, however, if any additional information is needed, let me know and I'll post it up here.

Author:  Ged325 [ Tue Jan 29, 2013 4:31 pm ]
Post subject:  Re: PIE.htc doing nothing...

Here's how I got mine to work:

Add this to your header:
(either in a master page or to the page itself)

  <style id="InlinePageStyles" runat="server" type="text/css"></style>

On the page_Load:

InlinePageStyles.InnerHtml += string.Format(".Pie {{ behavior: url({0}PIE.htc); }}", ConvertRelativeUrlToAbsoluteUrl(this.Request, ResolveUrl("~/Scripts/")));

and the function:
    private string ConvertRelativeUrlToAbsoluteUrl(HttpRequest request, string relativeUrl)
        return string.Format("http{2}://{0}:{3}{1}", request.Url.Host, System.Web.VirtualPathUtility.ToAbsolute(relativeUrl), request.IsSecureConnection ? "s" : string.Empty, request.Url.Port);

take out the behavior from ALL styles.

Add class="Pie" to the controls.

This works for me using the 2.0:

<style type="text/css">
{background: White;
background: #FFF;
position: relative;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;

<div id="divHeader" class="Pie Rounded">
<%-- your stuff here %-->

Note that I'm using .Net 4 . . . if you're using just html I would hardcode the full path to the HTC for now.

Also note that in addition to the HTC you also need PIE_IE*.js in the same directory.

Author:  jason [ Tue Jan 29, 2013 7:49 pm ]
Post subject:  Re: PIE.htc doing nothing...

I was able to get your code to work, putting it into standards mode by making the doctype declaration the first thing in the document (the commented-out doctype lines above it put it into quirks mode.)

Author:  dsontag [ Thu Jan 31, 2013 1:05 pm ]
Post subject:  Re: PIE.htc doing nothing...

OK ... I've managed to get v1 to load and display gradients (mistake was the doctype as Jason pointed out - thanks!).

v2, however, does nothing. Path to V1 is /includes/PIE1/... and path to V2 is /includes/PIE/... Does V2 not recognize the same path as V1? If I change refs to v2 files, no gradients, etc display on the page. Ref to V1 and everything displays (minus the alpha gradients which is what I really need).

Also note that the v2 PIE.htc does not seem to get initialized whether I use the relative to site root reference /includes/PIE... OR absolute path with http://sitedomain/includes/PIE...

Trying to access the htc file in both the v1 and v2 directories results in asking me to download the file (which I assume is correct).

Author:  jason [ Thu Jan 31, 2013 4:22 pm ]
Post subject:  Re: PIE.htc doing nothing...

Do you have this on a live URL where I can take a peek? It's possible that it's a bug in v2.

If you watch the http traffic, does the PIE_IEn.js file get downloaded after PIE.htc?

Author:  dsontag [ Tue Feb 05, 2013 2:11 pm ]
Post subject:  Re: PIE.htc doing nothing...

I wish it was - this is on an intranet site behind the DMZ/Firewall. I'll check on the traffic and get back to you ...

Author:  dsontag [ Tue Feb 05, 2013 3:41 pm ]
Post subject:  Re: PIE.htc doing nothing...

Okie ... checked the logs and found this:

[05/Feb/2013:14:12:02 -0600] "GET /includes/PIE/PIE.htc HTTP/1.1" 304 -
so far so good ... PIE.htc is getting got ...

[05/Feb/2013:14:12:03 -0600] "GET /forms/'/includes/PIE/PIE_IE678.js HTTP/1.1" 404 17017
this is where it craps out ... instead of getting /includes/PIE/PIE_IE678.js, it appends the directory where the page is located plus an apostrophe to the beginning of the 'url'.

If I change the behavior line to include the full url of PIE.htc, I find this:
[05/Feb/2013:15:37:51 -0600] "GET /includes/PIE/PIE.htc HTTP/1.1" 304 -

and the JS call is this:
[05/Feb/2013:15:37:51 -0600] "GET /forms/%22http://opswebdev.mts.mb.ca/includes/PIE%22/PIE_IE678.js HTTP/1.1" 404 17676

It seems that regardless of what is used to call PIE.htc, the script somewhere appends the actual page's location to the beginning of the JS call.

Does this help?

Author:  jason [ Tue Feb 05, 2013 7:28 pm ]
Post subject:  Re: PIE.htc doing nothing...

What happens if you remove the quotes within the behavior url()?

Author:  dsontag [ Wed Feb 06, 2013 11:10 am ]
Post subject:  Re: PIE.htc doing nothing...

Removed the quotes in the CSS file and it works on my primary site. Now I have to figure out what is making it not work on my other two (smaller) sites here (which are on a different server). Will update if I find anything.
Thanks for all the help - fantastic proggie!

Author:  jason [ Wed Feb 06, 2013 11:31 am ]
Post subject:  Re: PIE.htc doing nothing...

There's definitely a bug in PIE.htc when quotes are present. Quotes should absolutely be allowed so I'll fix that ASAP.

Page 1 of 2 All times are UTC - 7 hours [ DST ]
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group