Use of CSS3 PIE

[Clement P, modificado hace 11 años.]

Hi,

I'd like to use PIE (http://css3pie.com/) to be able to use some css3 properties in IE 8.
All i have to to is put a .htc file in a folder, but i cant figure out which one.
To use it, i have to use a relative path to the HTML file being viewed, not the CSS file it is called from. But i can't find it. It is the portal_normal.vm, right ? But in which folder ?

Or i can put it in the server's root, so i try in localhost's folder but it's not working either. Where should i put the .htx file to acces it by just doing /PIE.htc (localhost:8080/PIE.htc) ?

Thanks

[Bavithra Rajendran, modificado hace 11 años.]

Hi,

You can put PIE.htc directly under the theme's _diffs folder. In css, you have to add like this :

behavior: url(/[custom-theme]/PIE.htc);

It will work.

[Clement P, modificado hace 11 años.]

Thanks, the link seems good yet it doesn't work

Any idea ?

[Matthew Ferrara, modificado hace 11 años.]

edit - after a day of struggling and frustration, Bavithra's answer posted earlier does indeed work.

Just a few things to check: 1. make sure your path is absolutely correct in the proper format, in this case I'm talking about slashes being forward slash / and not backslash \ for some reason my path I copy pasted into the url parenthesis was \ and was being escaped (removed) when loading into the document - this will break things/not work.

Secondly (2.) make sure no other css is loading and conflicting with your page. In my case, I had a javascript function loading all of the pertinent JavaScript and CSS, but I was also using the Theme css to style everything (or so I thought) and therefore the alternative css files were overriding the HTC behavior and thus, no good pie was being served.

This will get the website looking good in IE, everyone's favorite browser, so much easier than individualizing css declarations or configuring the PIE.js in javascript which also from what I've read is quite a performance hog.

Cheers,

[ranjith janepalli, modificado hace 11 años.]

Hi ,

Can some one please help me : on search i found two solutions for rounded corners . 1) Using .htc files ( pie.htc or border-radius.htc ) 2 ) Using .js files ( jquery curvy corners .js or pie.js ) I tried both and i failed miserably .

Since i don't have _diff's file , I'm not sure where to put these external files . Please check the image for theme-directory

As you all suggested , i used : both the behavior: url(/[custom-theme]/js/PIE.htc); and behavior: url(/custom-theme/js/PIE.htc);

In custom.css : .rounded-corners {

	border-radius: 10px 10px 0px 0px;
	-webkit-border-radius: 10px 10px 0px 0px;
    -moz-border-radius: 10px 10px 0px 0px;
	 behavior: url(/[custom-theme]/js/PIE.htc); 
	position:relative;
    z-index:10;
}

And for the js imports , i tried in portal_normal.vm by both the host url and local url but no luck

$theme.include($top_head_include)
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/css3pie/1.0beta5/PIE.js"></script>
<script type="text/javascript" src="/js/PIE.js"></script>

And also by reading all the posts , i found one simple sentence in common .. paste the .htc file in your root directory and use that path in css behavior :url(pie.htc) !!!
if anyone got success , please help me ... FYI jboss7 is the server !!

Did any one made rounded corners successful in liferay ? please guide me ...

Thanks a lot for your time !!!
Ranjit

[Scott Hanson, modificado hace 11 años.]

Just wanted to add another voice of frustration on this. I've moved the PIE.htc file around and gotten it to pull in but even when it does it completely destroys the theme in IE8. I'll see evidence it's *trying* to do something but mostly it just breaks background colors and other elements. Never had a problem with PIE on multiple other projects, but it seems like I'm just not going to be able to use it on Liferay--and thus, our theme is looking comparatively poorer in IE8.

There might be something to Matthew's post, but I don't understand how to fix it. It's very discouraging.

[ashish thomas, modificado hace 9 años.]

Also facing the same issue with portal application.

Am not able to correct map the path of Pie.Htc from css file. I tried the relative path method and also tied to map it through absolute path from the webcontent folder. Still no success.

I any one could has worked in portal-websphere. please let me know how to mapp the url correctly.
behavior:url(***/pie.htc);