Rounded corners not working in IE

[mechphisto]

I'm trying to get rounded corners to work in IE and am having a heck of a time. My current status is this:
I have the following in my CSS:

.roundedcontainedbar {
	width:250px;
	position:relative;
	left:50px;
	top:0px;
	border:1px solid #666;
	background:#999;

	-moz-border-radius:10px 10px 0px 0px;
	-webkit-border-radius:10px 10px 0px 0px;
	border-radius:10px 10px 0px 0px;
	behavior:url(/includes/border-radius.htc);
}

With it like that, the content of:

	<div class="roundedcontainedbar">
    Div 1<br>
	Div 1
    </div>

is visible, but the box itself is not.
If I take out the position, left, and top lines, it appears! (That is, if I'm emulating IE7.) But then the whole box is rounded and not just the top corners. (Also, that prevents me from using relative positioning.)

Any ideas on what I can do to make top-corners-only rounding work in IE, and let me use positioning?
Thanks for any feedback.
Liam

[kiwibrit]

I think you are trying to use a CSS3 feature (border-radius) not supported by IE - and that to get the rounded corner effect you'll have to use graphics.

I've not taken much interest in CSS3 - I take it that -moz-border-radius and -webkit-border-radius are proprietary code?

[Kor]

behavior:url(/includes/border-radius.htc);

Yes, this the cross-browser workaround for IE, but that solution is a server-side one, and some conditions must be fulfilled:

- the code works only under a server. If locally, you should emulate a server on your computer.
- make sure that the relative path to the HTC file is correct
- the code will work in IE only if all the 4 corners are rounded (I am not sure for the latest version of HTC).
- make sure you have the updated version of the htc file:
http://curved-corner.googlecode.com/...der-radius.htc

[mechphisto]

behavior:url(/includes/border-radius.htc);

Yes, this the cross-browser workaround for IE, but that solution is a server-side one, and some conditions must be fulfilled:

- the code works only under a server. If locally, you should emulate a server on your computer.
- make sure that the relative path to the HTC file is correct
- the code will work in IE only if all the 4 corners are rounded (I am not sure for the latest version of HTC).
- make sure you have the updated version of the htc file:
http://curved-corner.googlecode.com/...der-radius.htc

Thanks for the reply. But as I mentioned:
"If I take out the position, left, and top lines, it appears! (That is, if I'm emulating IE7.) But then the whole box is rounded and not just the top corners."
So yeah, I have the latest file, on the server, and the path is right, because it works. My complaint was that it's rounding all four corners, not just the top two.

If that's a built-in, non-changeable property of using the HTC file for IE, well, I guess I'm SOL until (presumably) IE9 comes out.

Thanks for taking the time to reply.

[Kor]

I have to add something:

- At least under Win7, I see that the htc file is loaded locally, as well
- In some cases, the rounded elements does not appear in IE if one of the parent Nodes has a certain beckground. The solution is to give the immediate parent (or the next - things look strange, as there is no precise "rule") a certain CSS position, usually relative.
- In some cases (form's buttons), IE doubles the border with an ugly, new square one (if the element has already a certain CSS border). The solution is to change the border using another hack:

<!--[if lte IE 7]>
<style type="text/css">
.buttonClass{
border:none;
}
</style>
<![endif]-->

This code can be placed anywhere, but under the main embedded or external CSS of the document.

[Major Payne]

Be sure you have the latesest version of css3PIE for IE installed. Some people were having problems with earlier version when using IE 8. Their demos worked just fine in IE 7/8 for me.