css3pie module: something wrong with paths?

It doesn't seem to work at all using either location.

Consider using the Libraries module and extract the library to sites/all/libraries/PIE. Make sure your files are at (e.g.) sites/all/libraries/PIE/css3pie.module (and not at (e.g.) sites/all/libraries/PIE/css3pie/css3pie.module)

Edit: as mentionned in the post below, I made a mistake. What I meant was sites/all/libraries/PIE/PIE_uncompressed.htc (not PIE/css3pie.module, took the file from the module folder instead of the library folder by mistake) - my aplogies if this caused any confusion.

I got this working in IE on a heavily modified site without too much trouble.

The README for this module just needs a little bit of cleanup as well as the .module itself as it (for me anyway) wrote paths that are not correct:

1. behavior is misspelled in README as behaviour which can confuse people trying to troubleshoot
2. I use the Library module heavily but it does not seem to be recognized. It writes the css file with this path:
   behavior: url(/sites/all/modules/css3pie/css3pie/PIE.htc);
   which is not correct according to the README and furthermore it is not correct with the instructions for those who do not use Library module (extracting to modules/css3pie/PIE wont work) and the post above this one you do not want .module files in your library directory.. library is for libraries that support modules, not modules themselves
3. I had to add AddType text/x-component .htc to my .htaccess file however I also verified that if you do not know how to modify or don’t have access to your .htaccess file, turning on the PHP wrapper does work.
4. With the PHP wrapper turned on in /admin/appearance/css3pie (Admin menu: Appearance  css3pie Settings) it does not correctly write the css. Writes: behavior: url(/sites/all/modules/css3pie/css3pie/PIE.htc); but in this case should be: behavior: url(/sites/all/modules/css3pie/css3pie/PIE.php);
5. I abandoned using the /sites/default/css3pie/css3pie.css file generated by the module by deleting it off the server and applying the settings directly into my CSS file for my theme. I cannot be sure that it won’t work for you… it might… but in my case I had to add “position:relative” to all components but one. This can be a big problem if you are not very good with CSS because you cant just set that on anything without the very real possibility that it can scramble (very seriously) part or all of your layout. To give an example, after I got all my rounded corners working (these were my test case) my main content background color disappeared… so I had to set position:relative on that too. Nothing got scrambled for me, besides I know how to fix it, but unless you’re lucky, you might need to be VERY GOOD with CSS if you start experimenting with my notes.

So, I deleted the css file that the module creates (and will recreate later even if you delete it – see module instruction) and tested all my stuff with it off the server. I then allowed it to be regenerated and though it is loading, I removed the classes from the settings so the file it generates has no content, and even when I left the classes that I started with in there, it had no adverse effect…. The CSS stuff I added to my theme CSS file happily chugs along no problem (I stopped the pie module css file from even loading in my code but I am not covering that here).

I based my troubleshooting on my existing CSS knowledge and used the CSS3PIE official documentation for troubleshooting (http://css3pie.com/documentation/known-issues/ +there is a forum as well… it might save your @$$). *Read the part about “shorthand” css… I had to rewrite some of my css into longhand *

All you need to do is make sure the PIE library files you download from css3pie.com are in sites/all/modules/css3pie/css3pie
sooooo… your htc file would be here: sites/all/modules/css3pie/css3pie/PIE.htc
or, if using the php wrapper: sites/all/modules/css3pie/css3pie/PIE.php
this will be the easiest way for you to manually get this working until the maintainer resolves the issues for D7.

Sample CSS that I put in my theme’s css file to get rounded corners:

#content-container {
  position:relative;
  width:99%;
  margin: 0 auto;
  padding: 10px 0;
  background:#EDE8D4;
  border-radius: 0 0 9px 9px;
  -moz-border-radius: 0 0 9px 9px;
  -webkit-border-radius: 0 0 9px 9px;
  behavior: url(/sites/all/modules/css3pie/css3pie/PIE.htc);
}
div.views-row-odd { 
	position:relative;
	background:url(../i/bg-hive-trans44-alpha.png) repeat;
	padding:4px;
	margin-bottom:4px;
	margin:28px 0px 24px 0px;
	border:1px solid #2F2F2F;
	border-radius:0px 17px 0px 17px;
	-moz-border-radius:0px 17px 0px 17px;
	-webkit-border-radius:0px 17px 0px 17px;
	behavior: url(/sites/all/modules/css3pie/css3pie/PIE.htc);
}
div.views-row-even { 
	position:relative;
	background:#FFFFCC url(../i/bg-hive-trans44-cream.png) repeat;
	padding:4px;
	margin-bottom:4px;
	margin:28px 0px 24px 0px;
	border:1px solid #2F2F2F;
	border-radius:0px 17px 0px 17px;
	-moz-border-radius:0px 17px 0px 17px;
	-webkit-border-radius:0px 17px 0px 17px;
	behavior: url(/sites/all/modules/css3pie/css3pie/PIE.htc);
}
/* Add rounded corners to default node/comment links */
nav.links ul.links li a {
  position:relative;
  text-transform:capitalize;
  border-radius: 7px;
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  behavior: url(/sites/all/modules/css3pie/css3pie/PIE.htc);

****NOTE – I tested this with IE and Safari. IE is fine, Safari does not render rounded corners unless you have ONE value, it cant do anything but round all corners (tested it on PIE official site as well). I suspect this may apply to other CSS directives where you can have top,right,bottom,left values, such as border-radius:4px 0px 4px 0px; Safari only works with border-radius:4px which rounds all corners of the element you are controlling, such as a block header. I could give a crap about anyone who uses Safari, but I always test with it just to get a laugh at how crappy that thing is! Sorry MacHEADS…. Its C R A P! (*for a production site you are building for a client you DO need to care though, I only say that because I am working a personal site that caters to smart people…ahaha… half kidding ;)

I hope this helps you guys out! It took me longer to write this article than it did to get it working! (very advanced in the CSS though… I say that as humbly as possible lol)

Have fun! :)~

This bug with paths is really a show stopper in some cases. When using make & build scripts to build up my dev environment from scratch I can't automatically fetch PIE.htc and extract it to modules/css3pie/css3pie because the css3pie subfolder already exists. Now I have to move css3pie to my custom modules and update it by hand. This should be fixed asap so one can use libraries/PIE or css3pie/PIE to store PIE.htc.

I made patch to 7.x-2.x head with following changes:

• Changed the location of PIE library to sites/all/libraries/PIE because the module folder is wrong place for the library to be placed.
• There is now dependency to libraries module because of the above.
• Added file exists checks to see if PIE.htc is under libraries. If not module will display error on module admin page.
• Added configuration link under modules page.

Please try this patch and report if you have any issues with it.

These changes have been applied to alpha2 release.

Library and css3pie 7.x-2.0-alpha2 modules installed, css3pie library installed in /drupal/sites/all/libraries/PIE/, I still see squared corners though...
Here's the CSS code:

.rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
  behavior: url('sites/all/libraries/PIE/PIE.htc');
}

In admin page .rounded-corners is selected. The php wrapper doesn't work as well. Tested on IE6/WinXP (native). Chrome and Firefox work like a charm.
Any hint?

Any hint?

Add position: relative; to the attributes.

I have PHP wrapper enabled every time.

Just to be sure but have you added .rounded-corners to the css3pie settings form at admin/appearance/css3pie?

@knalstaaf
Added position:relative, and enabled php wrapper, but nothing changed.

@iler
Yes, .rounded-corners is in the css selectors in the config page of css3pie.

I tried both relative and absolute paths for PIE.htc, but, again, nothing changed :(
Further, having library module installed, a simple
behavior: url('PIE.htc');
should suffice, assuming PIE.htc is in sites/all/libraries/PIE/PIE.htc, if I understood correctly.

Edit: Drupal is installed in a subdirectory, not in the root, if of any help. Shouldn't the library module take care of the relative path anyway?

Did you apply iler's patch already, or are you using the latest alpha2-release (to which the patch was applied)?

I'm using the alpha2 release.

The generated css in sites/default/files/css3pie looks like this:

/* css3pie */
.rounded-corners
{
  behavior: url(/drupal/sites/all/libraries/PIE/css3pie/PIE.htc);
}

It adds a 'css3pie' extra directory. Anyway, changing it by hand and setting the correct absolute path doesn't solve the problem, I still see those squared corners... Further, setting the php wrapper on should change the behavior into /drupal/sites/all/libraries/PIE/PIE.php, but it doesn't.

With the attached patch it *SHOULD* work, but the generated css in my case gets overridden by pages.css (I'm using zen template engine), so the rule behavior: url(/drupal/sites/all/libraries/PIE/PIE.php); in sites/default/files/css3pie/css3pie.css is overridden by the behavior: url(PIE.htc); in sites.css, so the file isn't found again.

For now I'll stick without the module, a plain css3pie library (with php wrapper, it looks like my server doesn't support htc mime type) with the absolute path set does the trick.

Hope this helps.

This is fixed in the latest dev version. Thanks for reporting.

the patch was applied, and the path seems right now.

But my element just showed transparent background without seeing any round corner.

It seems the css3pie removed my background.

The round corner still only works under FF & chromium.

after more test, found that IE6, IE7 works, IE8 doesn't

finally ok, http://css3pie.com/forum/viewtopic.php?f=3&t=10

add position:relative;

after trying... some hours later...

installing the dev version after deinstalling the alpha one,
the path is correct in to the .htc. file or ... have
the "/PIE" in "sites/all/libraries" - working
not in the drupal-default-site.

(Edit: Working with my offline versions / files)

have a zen-subtheme on a local xampp (apache plus mysql and others) installation
with a local win xp "domain" (to get my "sites/test/" and not "sites/default".)
so i type "test" in my browser and can access the drupal installation.

in my own css-file i have some css-code for my own "zen-sub-theme" (correct words?)
and some round corners with css3, works fine with firefox, chrome, safari for win.

internet explorer 8 wont work well. trying different pathes, different codes, different different...
in my css file, i try several...

then, i tried

-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-khtml-border-radius: 10px;
  	-o-border-radius: 15px;
	-pie-border-radius: 15px;

without a "behavior" in the css file.

The wrapper is off, i take "no"... in "CSS Selectors"
fillin the classes or id´s i need (like .block or #logo img to
give them round corners).

only

-pie-border-radius: 15px;

makes me happy :-)

without behavior in the css-code
(with installed librarie api modul and the css3pie modul)

(Edit: Working online versions / files - upload local db and drupal files to hoster, don´t know if the server will understand ".htc-files")

surprise ... online, wont work with internet explorer 8

ok, i took a look to files of css3pie - on the right place.

in the files:
css3pie.css will not take my classes or id´s.
i download and edit the file:

instead of ".../sites/all/..../PIE.htc
i take
behavior: url(/sites/all/libraries/PIE/PIE.php);

in "my-subtheme.css"-file (located in "sites/all/themes/my-subtheme/css"

i put 
behavior: url(/sites/all/libraries/PIE/PIE.php);

on everey place in code where i use "shadow, radius" for css3-effects.

in a meanwhile i put

AddType text/x-component htc

to the ",htaccess" file in my drupal root. dont know, if this is one necessary, but
i do not replace the htaccess yet.

this had effects and internet explorer 8 works with my online drupal installation.
dont know really (at the moment :D) why. now i have rounded corners and shadows
on blocks, a header image, the main content of and two nice menu's i use in this drupal-installation
at the moment with a "header-3 columns-footer layout" colum 1 and 3 are blocks and or views or something else and the main content in column 2 in the middle, haeder and footer have a nice menu.

zen subtheme, not in "sites/default" - i have it in "sites/test".

greetings from germany (my english is getting better sometimes i hope :-))

hi, had the same problems as described above
when i looked in firebug i was surprised to see that it writes - "behaviour: url(/sites/all/libraries/PIE/css3pie/PIE.htc), bcz i was sure that pie.htc is in the /sites/all/libraries/PIE" folder, as it was recommended in readme file. so i tried to create that "css3pie" folder and place all files to it, but no resalt, on the module settings page was an alert that library didnt exist. i looked in .module file and found that module checks whether library exist by path "libraries_get_path('PIE') . '/PIE.htc'" (near 86 line), but than it writes 3 others paths like "libraries_get_path('PIE') . '/css3pie/PIE.htc'" (near 95, 105, 115 lines), i`ve corrected them to libraries_get_path('PIE') . '/PIE.htc' and all works awesome now!

same problem, tried everything from kifuzzy and novakov, nothing works.
But for me it writes "behaviour: url(/Sprout/sites/all/themes/css/PIE.htc)" – so it looks in the theme o.O
So when I put the PIE.htc into the theme it works, but I'd prefer a clean solution.

Subscribing

I'm uploading a fixed version today/tomorrow as a dev version.

it seems to be fixed now.

#4 worked for me!

Thank you DRIVE!!! zomg! got all my rounded corners to work in IE9,8 & 7! woot! This ticket needs to either stay open, or the info added to the readme file...

all my linear gradients work too...

Yes! position: relative in the css resolved it for me.

Thanks