CSS3 PIE Forums
http://css3pie.com/forum/

Cant get border-radius to work in IE 7, 8 or 9
http://css3pie.com/forum/viewtopic.php?f=3&t=2087
Page 1 of 1

Author:  NccAdm [ Mon Jul 08, 2013 11:27 am ]
Post subject:  Cant get border-radius to work in IE 7, 8 or 9

The HTML page and pie.htc are stored in the same folder. The CSS and HTML are given below. Can anyone figure out what is wrong?
------------------------------------------------------------------------
<style type="text/css">
#Element {
border: 1px solid #999;
behavior: url(PIE.htc);
border-radius: 10px;
padding: 15px;
width: 280px;
text-align:center;
background-color: #99FFCC;
}
</style>
</head>

<body>
<div id="Element">
This should have rounded corners
</div>
</body>

Author:  renderman017 [ Thu Aug 08, 2013 10:23 am ]
Post subject:  Re: Cant get border-radius to work in IE 7, 8 or 9

try putting a "/" in front of PIE.htc -> (/PIE.htc)

Author:  NccAdm [ Fri Aug 09, 2013 3:53 am ]
Post subject:  Re: Cant get border-radius to work in IE 7, 8 or 9

Hi - thank you for the suggestion. I have played around with the path, finally settling on including the absolute path to make sure, but it still doesnt work. The site is here, if anyone has the time to take a look.

http://www.norwich.gov.uk/

I am trying to get the rounded corners to appear on the header menu, on hover.

Grateful for any help.

Author:  Tonttu [ Sat Aug 10, 2013 9:05 am ]
Post subject:  Re: Cant get border-radius to work in IE 7, 8 or 9

NccAdm wrote:
I am trying to get the rounded corners to appear on the header menu, on hover.


Use the behavior on simply the "a" element without any pseudo elements.
Code:
#headerLinks a {
behavior: url("http://www.norwich.gov.uk/SiteAssets/PIE/PIE.htc");
}


Then the border radius styles will work on the pseudos.

Author:  NccAdm [ Tue Aug 13, 2013 4:32 am ]
Post subject:  Re: Cant get border-radius to work in IE 7, 8 or 9

Hi - thanks for the input and suggestion, but I tried it and it still isnt working. Here's the CSS. Can you see what I am doing wrong?

#headerLinks a {
behavior: url("http://www.norwich.gov.uk/SiteAssets/PIE/PIE.htc");
}
#headerLinks a:hover {
background-color:#33A2AD;
border:1px solid #3AA6B2;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
}
#headerLinks a:focus {
background-color:#2FBDC9;
border:1px solid #37C5D1;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-khtml-border-radius: 4px;
border-radius: 4px;
outline:0;
}

Author:  Ganesh [ Sat Aug 17, 2013 1:31 am ]
Post subject:  Re: Cant get border-radius to work in IE 7, 8 or 9

Hi,
Try adding following in your css classes

position: relative;

Hopefuly this should resolve your issue if path to PIE.htc n all other factors are correct.
I was having same issue when I was fixing IE issues for my
htttp://www.sebure.com
htttp://www.bookcarpool.com

If even this doesnt help let me know, on
htttp://www.codespheresolutions.com
I will be happy to help.

Thanks n Regards,
Ganesh :ugeek:

Author:  NccAdm [ Tue Aug 27, 2013 3:18 am ]
Post subject:  Re: Cant get border-radius to work in IE 7, 8 or 9

Hi Ganesh,

Thank you for the suggestion. Unfortunately it didnt resolve the issue. I will contact you as you suggested.

Author:  ashepherd1 [ Fri Nov 22, 2013 9:34 am ]
Post subject:  Re: Cant get border-radius to work in IE 7, 8 or 9

Ganesh wrote:
Hi,
Try adding following in your css classes

position: relative;



Ganesh, thanks for posting this! I ran into the same issue of PIE not working on my site and adding position: relative; solved the problem.

Can I ask why is this needed?

Page 1 of 1 All times are UTC - 7 hours [ DST ]
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/