1

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

Ali
  • 468
  • 7
  • 18
  • what if you try full URL with http:// in the browser, did you get the file? or did you get 404 or other http error? – Arief Jan 24 '12 at 13:18
  • Arief thanks for quick replay. I can get the .htc file – Ali Jan 24 '12 at 13:24
  • Well when i try full url like http://localhost:51281/scripts/PIE.htc it give me option to download Pie.htc file. It means the path is properly specified. – Ali Jan 24 '12 at 13:26
  • use that full path in your CSS file, also check if your javascript file is loaded correctly. – Arief Jan 24 '12 at 13:57
  • I think i already tried this. But i will give another try and then i will let you know. Thx – Ali Jan 24 '12 at 14:53

2 Answers2

1

It's not a path issue... it has to do with the web server understanding how to serve the .htc file. There is a wrapper script included that does this for PHP, you can start with that and tweak it for IIS.

Robert Bolton
  • 667
  • 3
  • 8
  • 22
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

Ali
  • 468
  • 7
  • 18