Css3Pie in MVC, Where to Place the Pie.Htc File

css3pie in MVC, where to place the pie.htc file?

As a side note (and maybe it will fix your issue anyway) if you don't want to have the .htc file at your root, you can do the following to get around the relative pathing issues inherent with behaviors. It's not the prettiest solution, but it works well -

In your css, define the behavior as:behavior: url(CSS3PIE);

Then in your Global.asax.cs have the following code:

protected void Application_BeginRequest(Object sender, EventArgs e)
{
    CheckForCSSPIE();
}

private void CheckForCSSPIE()
{
    if (!Regex.IsMatch(Request.Url.ToString(), "CSS3PIE"))
    {
        return;
    }

    const string appRelativePath = "~/Content/css/PIE.htc";
    var path = VirtualPathUtility.ToAbsolute(appRelativePath);
    Response.Clear();
    Response.StatusCode = (int)HttpStatusCode.MovedPermanently;
    Response.RedirectLocation = path;
    Response.End();
}

It will simply look for any request matching "CSS3PIE" and return the .htc file from the correct location.

css3PIE or PIE.htc in Asp.net

Ok I fixed the issue. So i am writing here to help other peoples. When you are using master pages in asp.net and you are using .htc file as relative path in css then use position as relative. for target element which used css3 style. For example the css class is round-box

<style>
.round-box
{
  border: 1px solid #696;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
  behavior: url(PIE.htc);
}
</style>

The html element on which we will apply .round-box style is

<div class="round-box">This is a round Div<div>

So those who have issue with round corners not working on IE just put IE specific position:relative for IE browsers like.

 <!--[if lt IE 9]>
    <style>        
        .round-box
        {
            position: relative;
        }       
    </style>
 <![endif]-->

This will fix the round issue or those that have no border visible. Keep in mind position:relative will effect child elements. Use it wisely

where do I put the PIE.htc file (for making IE work with CSS3) when I'm using cakephp

Try using an absolute path:

behavior: url(/path/to/PIE.htc);

Note the leading forward slash. This way, no matter what the current page is, the path to the .htc file will remain the same.

A full URL will work too:

behavior: url(//example.com/path/to/PIE.htc);

If you do use a full url, use a protocol relative url so you don't get insecure content warnings when switching to https.

A lot of elements need position:relative or zoom:1 when using PIE in order to behave in IE, make sure you check the known issues page and play around until you get it to work.

Setting file location of PIE.htc

behavior: url(../pie/PIE.htc);

".." for folder selection and pie is the folder

CSS3 PIE - behavior HTC file doesn't load when site is accessed without trailing backslash

Despite your comments elsewhere on this question, this isn't actually a bug in IE; it's handling the relative path perfectly rationally.

The reason this issue happens is because the two URLs (ie with and without the slash) are actually in different directories as far as the URL path is concerned.

• http://sampledomain.com/site -- this is treated as if site is a filename in the root directory.

• http://sampledomain.com/site/ -- this is treated as if site is a directory in the root, and you're loading the default file in that directory.

So as far as the browser is concerned, the two URLs are in different directory paths. And therefore, if you specify a relative path, it will be relative to different paths in each, and one of them will clearly not point to the right place. If you have other items with relative paths, such as images, they would also have the same issue, and it will be in all browsers, not just IE. (I assume, therefore, that you don't have many other relative paths on this page)

The quick solution, as you already worked out, is to turn it into an absolute path, starting with a slash. This will ensure it's loaded from the same location in the site regardless of what the URL is that you load it from.

However, the question hints at a bigger issue. A well-behaved site should not allow both of those URLs to be valid. The URL without a slash should redirect to the URL with a slash; it should not simply load the same content regardless of whether there's a slash or not.

Allowing both URLs to load the same content is explicitly bad for your site's SEO. It means that Google will see your site as having two pages with the same content, and this in turn is counted as a minus point for your google rankings.

The issue is easy to resolve using .htaccess/mod_rewrite, and ideally, you would resolve this issue with as much urgency as the original CSS3Pie loading issue.

Hope that helps.

Referring .htc file from CSS in ASP.NET

You have to use an absolute path or a full URL reference as suggested here and here.

CSS3 + HTML5SHIV + CSS3PIE Border-radius NOT working on IE8 but working on IE7,9,10

You're using PIE 2.0 beta, the .htc file for PIE 2.0 simply loads an external javascript file PIE_IE678.js. You need to upload PIE_IE678.js to your server and then inform PIE where the javascript file is located.

The easiest way is to add the PIE_IE678.js file to the same directory as PIE.htc and then use the absolute URL to the PIE.htc file in your css file, e.g:

behavior: url('http://www.quickseorankings.com/dev/PIE.htc');

and your directory structure would need to be:

quickseorankings.com/
   dev/
      PIE.htc
      PIE_IE678.js

Note: Don't manually load any of the PIE .js files, the .htc file loads the additional javascript files for you.

---

Related Topics