Hi,

I am writing a page with CSS style sheet, with the script as follow:

#Manual ul li a { padding: 6px 15px;
margin: 0px 5px;
display:inline-block;
float:left;
width:100px;
min-height:30px;
text-decoration:none;
background-color:#CCCCCC;
text-align:center;
-webkit-border-bottom-right-radius:6px;
-moz-border-radius-bottomright:6px;
border-radius: 0 0 6px 0;
behavior: url(/public_html/CSS3PIE/PIE.htc);
margin-top:-3px;
border-top:3px #99CC00 solid;
}

My files are saved in the following manner:

>root folder
>>>public_html [folder]
>>>>>>index.html
>>>>>>CSSstyle [folder]
>>>>>>>>>style.css
>>>>>>CSS3PIE [folder]
>>>>>>>>>PIE.htc
>>>>>>>>>PIE.php

As you can see, towards the bottom of the CSS script I tried to make the border-radius work for IE8.
The page in question is "index.html", which is linked to "style.css".

When the site is activated the borders are squared in IE8 (but rounded in IE9 and Chrome).

Things that I have tried included:
(a) save the PIE.htc under the root folder or the "public_html" folder;
(b) replace "float:left" with "position:relative; z-index:0";
(c) use PIE.php instead of PIE.htc.
Unfortunately none of these worked.

Would somebody kindly let me know where the problem may be?

Much appreciated!

Hello everyone,

After repeated testing and checking, it appears that it was a link problem after all. Although I don't understand why the previous link was wrong.
Anyway, apparently, it is best if I write "http://www.example.com/CSS3PIE/PIE.htc".

I also notice that one can have position:relative while at the same time keeping the float:left property, by writing
"float:left;
position:relative;
top:0px;
left:0px;"

Best wishes.

Hi! I'm in the same boat as pchMK, at least in IE 8, which is the version I have access to - for the life of me I can't get it to work.

- Using PIE.php to ensure correct content-type.
- Placing both .php and .htc files in root folder of site and referencing with various approaches: "/PIE.php", "PIE.php", full URL with and without quotes around it...
- Tried adding position:relative and z-index:0 (though my div's are not actually set to float left)

I'm in WordPress, so I anticipated the URL path might be an issue, so even tried the PIE plugin - to no avail.

Here's a link (client site so I'm hiding the URL with Bit.ly) if it's helpful:

http://bit.ly/18PgYWE

Thanks!
adam

Well, after re-reading the FAQ about known issues, I did get it to work... and have deduced the minimum requirement for it to do so:

Enclosing object has:
- display: block
- Position: relative

Rounded object has:
- display:block
- NO position or z-index needed
- in my case, PIE specified at the root with

Thanks!

Well, it all works fine in IE 8 on the homepage, but not on any other page!

I've checked and checked the source code and there is NO relevant difference I can detect between the two in either the HTML or CSS...

Here's the working homepage with rounded corners:

http://bit.ly/18PgYWE

and here's a typical "inside" page with resolutely square corners:

http://bit.ly/1bknncD

I'm almost at the end of my rope... hope someone can advise and perhaps point out something obvious I'm not seeing?

Thanks...

seems like you have wordpress (or wordpress/creative) set as a virtual directory on your web server.
where is ur PIE.php file located?
just to test, in your http://treetoponline.com/wordpress/wp-c ... /style.css file, under HTML.ie BODY .site, try replacing:
behavior: url(PIE.php)
with:
behavior: url(/PIE.php)

Thank you, Kamaldeep! I was SO sure I'd tried that, but it looks like I hadn't, and sure enough it works.

Thanks again!
Adam

How do I report bestgamenews01 as a scurvy spammer?

This posts is very informative. Thank you!