Border-radius works for all browser except IE (I test it with IE8). The solution is to put behavior:url(PIE.htc); into the css class. Looks like the path behavior:url(PIE.htc); is correct, because:
1) PIE.htc is in the root folder and
2) the background disappears if I use behavior:url(PIE.htc);
and
3) the background appears again if I use behavior:url(/any/other/wrong/path/to/PIE.htc);
So, I believe behavior:url(PIE.htc); is used properly.
Unfortunately,
.superborder
{
border:5px solid red;
//here are a couple of strings for radius settings that are work for other browsers
behavior:url(/sdf/PIE.htc);
}
removes the background in IE but the borders are still not rounded in IE.
I've read PIE FAQ, played with position:relative; z-index and zoom. all together and separately. Nothing helps. Does anybody know why?
Added: I have found the problem but don't know the solution. The problem is this css:
#page-content{
visibility : hidden;
}
where #page-content contains the whole page.
It is hidden (as you see above) until
$(window).bind("load", function ()
{
/*jumping fonts fix*/
$('#page-content').css('visibility', 'visible');
});
So when the page is loaded, it becomes visible. The reason I make it hidden until loaded because one of browsers loads the page although special fonts are not loaded yet. That's a good solution so the page doesn't jump until it is fully loaded. Unfortunately, now I have to choose between these two fixes. How to combine them both - rounded corners for IE and font jump fixer? Thanks a lot.
P.S. The font jump fixer above is my modification of Using jQuery to know when @font-face fonts are loaded
