Question

Well I used css3pie in asp.net which is not working. I tried every possible solution. Searched a lot of forums but failed to properly use PIE in asp.net. Let me show you my project structure.

I have master and inner master pages in my project hierarchy.
The css3pie is working on those pages which don’t use master pages.
My css and .htc files are as follows

• Root
  • css
  • script

When I use css3PIE without Master page the it works:

<script type="text/javascript" src="../Scripts/html5.js"></script>        

<link href="css/IE.css" rel="stylesheet" type="text/css" />

The above code is working. But when i used any page with master. It is not working. My css looks some thing like this:

behavior: url('../Scripts/PIE.htc');

The css is placed in IE.css file. You can see the in above code.
Remember i tried every possible combination to refer .htc in css

behavior: url('../Scripts/PIE.htc');

behavior: url('/Scripts/PIE.htc');

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

behavior: url('PIE.htc');

with and without quotes

One thing more. A lot of people are saying it is due to relative path. Well i tested those things. when i look at the rendered html in Development tools in IE. It applys the behavior but not working.
Please help me. It will be highly appreciated. Thanks in advance

Answer 1

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