I have an 'a' tag displayed block with border-radius applied to it. In IE6/7 and firefox and chrome it works fine. In IE8 not only are the corners not rounded, but the background-color applied to them disappears. When I inspect the element it thinks the background-color is there...

Any ideas?


div#header ul#mainNav {
position:absolute;
top:153px;
left:650px;
display:block;
width:250px;
}
div#header ul#mainNav li {
float:left;
display:inline;
clear:left;
width:250px;
height:20px;
margin-bottom:5px;
padding-left:16px;
background:url(../images/template/mainNavLi.gif) top left no-repeat;
background-position:0 3px;
}
div#header ul#mainNav li a {
float:left;
display:block;
font-family:Tahoma, Geneva, sans-serif;
font-size:14px;
color:#fff;
background-color:#B40F5A;
padding:2px 4px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius:6px;
behavior:url(js/PIE.htc);
}

I have managed to fix this by positioning the 'li' element relative, and applying a z-index of 0. This also works applying it to the 'a' tag.

You will alway need to give an element a relative positoin. Otherwise PIE can not position correctly. He always position to the very left/top position.

Great that its works now!

greetings Jeroen