IE border radius issues

[gellegbs]

I have 3 divs that use the border radius commands. The header div I want to have the top 2 corners rounded. The container div all 4 sides and the footer div only the bottom two corners rounded. This seems to work in every popular browser (firefox, opera and chrome) except IE where the right sides are not cooperating.Here is my css:

.header {
	background:transparent;
	background-image:url(../images/headerfooter.png);
	text-color:#FFF;
	list-style:none;
	-moz-border-radius-topleft:50px;
	-moz-border-radius-topright:50px;
	border-top-left-radius:50px;
	boder-top-right-radius:50px;
	-webkit-border-top-right-radius:50px;
	-webkit-border-top-left-radius:50px;
}

.container {
	width: 960px;
	margin: 0 auto;
	background: rgba(126, 46, 40, 0.6);

	-moz-border-radius:50px;
	border-radius:50px;
	-webkit-border-radius:50px;

	
}
.footer {
	padding: 10px 0;
	background:transparent;
	background-image:url(../images/headerfooter.png);
	color:#FFF;
	-moz-border-radius-bottomleft:50px;
	-moz-border-radius-bottomright:50px;
	border-bottom-left-radius: 50px;
	boder-bottom-right-radius:50px;
	-webkit-border-bottom-left-radius:50px;
	-webkit-border-bottom-right-radius:50px;
}

[hyperionXS]

Versions prior to IE9 do not accept border-radius.
You can try this workaround http://www.htmlremix.com/css/curved-...-cross-browser

[gellegbs]

I have IE9, so I dunno why it still shows. For the fix where do I link to reference border-radius.htc? They removed the link on the page to download the file so I cant upload it to my cpanel. I dunno.

[hyperionXS]

Here is the link to download.
http://code.google.com/p/curved-corner/downloads/list

[gellegbs]

thanks ill try it out

[gellegbs]

made the changes and the .htc file is uploaded on server. css is this now, and right side top and bottom not working, but left side is fine.

.header {
	background:transparent;
	background-image:url(../images/headerfooter.png);
	text-color:#FFF;
	list-style:none;
	-moz-border-radius-topleft:50px;
	-moz-border-radius-topright:50px;
	border-top-left-radius:50px;
	boder-top-right-radius:50px;
	-webkit-border-top-right-radius:50px;
	-webkit-border-top-left-radius:50px;
	behavior:url(http://www.swtoriphonewallpaper.com/border-radius.htc);
}

.container {
	width: 960px;
	margin: 0 auto;
	background: rgba(126, 46, 40, 0.6);
 	-moz-border-radius:50px;
	border-radius:50px;
	-webkit-border-radius:50px;
	behavior:url(http://www.swtoriphonewallpaper.com/border-radius.htc);

 .footer {
	padding: 10px 0;
	background:transparent;
	background-image:url(../images/headerfooter.png);
	color:#FFF;
	-moz-border-radius-bottomleft:50px;
	-moz-border-radius-bottomright:50px;
	border-bottom-left-radius: 50px;
	boder-bottom-right-radius:50px;
	-webkit-border-bottom-left-radius:50px;
	-webkit-border-bottom-right-radius:50px;
	behavior:url(http://www.swtoriphonewallpaper.com/border-radius.htc);
}

	
}

[gellegbs]

For some reason i can't correct my mistype in the last post. All the curly brackets are where they should be in the code, it was a copy and paste error. When I validate W3C tells me every border radius attribute is invalid and my rgba attribute and I did read where W3C won't validate any of the border radius or rgba attributes (not updated?). I did triple check them and they are all valid. But, yes, the problem still exists on the right side of the divs, ugh!

[gellegbs]

It works now I misspelled the word border on the right side attributes
I guess the most frustrating issues is the little mistakes you make.

[hyperionXS]

Little mistakes Glad you made it work.