IE 8 border radius hack

How exactly are you calling in those the files? Copy-paste the contents of the file where you’re referencing them into a Pastebin so folks can take a look.

To use the behavior on WordPress, you need to put the absolute url.

So let’s say if you want to have the rounded border for mainbox.
Add this code in the header.php

<style type="text/css">
#mainbox {
	behavior: url("<?php bloginfo('url'); ?>/border-radius.htc");
}
</style>

and upload border-radius.htc to your root directory.

You may also want to check out CSS3PIE:
https://css3pie.com/

geeksfolder: I have tried what you suggested and no luck. In the below script you will see the url path that i am using, but i have also tried:

‘
behavior: url(PIE.php);
behavior: url(wordpress/PIE.php);
behavior: url(localhost/wordpress/PIE.php);
behavior: url(/localhost/wordpress/PIE.php);
behavior: url(https://localhost/wordpress/PIE.php);
behavior: url(https://localhost/wordpress/PIE.php);
‘

I have tried everything including the border-radius way with all paths (like above) and nothing. The PIE php and htc have not worked either. I am at a loss. Also, i have placed copies of the PIE.php/PIE.htc IE-CSS3.php/IE-CSS3.htc in all directories from c:\\xampp right down into the theme folder itself.

‘
#inner {
width:960px; float:left;
margin:0px auto 5px;
min-height:670px;
background:#EFEDED;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 0 0 5px 2px #888;
-webkit-box-shadow: 0 0 5px 2px #888; /* blur5 distance5px */
box-shadow: 0 0 5px 2px #000;
behavior: url(https://localhost/wordpress/PIE.php);}
‘

Hey xmatter,

I’m currently using CSS3PIE for my clients’ wordpress sites,
and it works ok.

Download CSS3PIE and in the folder you will see PIE.htc with other files.
I usually drop just PIE.htc in the root directory of wordpress.

And let’s say you want to create a div called mainbox with the rounded corner. On CSS3PIE site, create the code and copy it into your style.css excluding behavior: url(/PIE.htc).

border: 1px solid #696;
padding: 60px 0;
text-align: center; width: 200px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background: #EEFF99;

And add the code below in the header.php (sorry the code in my first comment was wrong).

<style type="text/css">
#mainbox {
	behavior: url(<?php echo get_bloginfo('url'); ?>/PIE.htc);
}
</style>

It should work, let me know if you are still having a problem ??

I have put PIE.htc here:

‘C:\xampp\htdocs\wordpress’

I have added the style css to head.php within the head tag. Still nothing.
I did however notice that the background color is now gone from the “main” area and when i do multiple repeat refreshes in IE, the background color looks like a strobe light. So the color is residing in there, without rounded corners, somewhere.

Other suggestions?

Also, i created a basic template after a fresh install of xampp/WP to make sure it wasn’t some other code screwing something up.

Maybe try adding

position:relative;
zoom:1;

in the box.

geeksfolder: worked like a champ!!!!

Thank you so much!

it was the position and zoom all along. I can comment out the style within the header.php and place the htc file within root and add position and zoom within the style.css and it all works. perfect!

the only thing that doesn’t work is the li a hover:

‘.menu li a:hover {
color:#457843;
background:#EFEDED;
padding:13px 19px 13px 19px;
margin:-3px 2px 0 0;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
position:relative;
zoom:1;
behavior: url(PIE.htc);}

.menu li.current_page_item a {
color:#457843;
background:#EFEDED;
padding:13px 19px 13px 19px;
margin:-3px 2px 0 0;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
position:relative;
zoom:1;
behavior: url(PIE.htc);}
‘

At first i have these 2 styles combined since they display the same and separated them to try and make it work. IE will only hover without rounded corners. any thoughts?

I forgot to mention….. the current_page_item DOES work, it’s the hover that DOES NOT work.

I’m wondering if you have any example page that I can see?

i do not any live hosting at this point. sorry. I guess i will just deal with it for now and fix in the future. Thanks for all your help!

PIE doesn’t work in some occasions
like for the transparent background for IE6,
if you repeat the background image, it won’t work.

But in your case, you don’t have to put behavior
for the hover.

Hope it helps ??

Hello guys,

I have the same problem, PIE is not working on my site (www.brezideje.si). I followed the procedure of geeksfolder, and still it’s not working. Any idea, please?

I am using repro theme, from themeforrest. Thanks, see ya

Thanks, Geeksfolder for posting your help. I was confused where the PIE.htc file should go and you spelled it out for me.

I suddenly found out that IE8 wasn’t behaving with CSS3 border-radius declarations, so I’m glad you shared CSS3PIE info. I was 95% done with a nice site redesign and my client says, “Did you do the round corners? I still see squared corners. I’m using IE8.”

Worked like a charm. Now I can finish the project today.