I am using jquery ui dialog and also css3pie for making border radius work in IE8.Following is the html code snippet that I have:
<!DOCTYPE HTML>
<html>
<head>
<title>test</title>
<script src="js/jquery-1.7.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles/themes/base/jquery.ui.all.css" />
<script src="js/jquery.ui.core.min.js"></script>
<script src="js/jquery.ui.widget.min.js"></script>
<script src="js/jquery.ui.button.min.js"></script>
<script src="js/jquery.ui.mouse.min.js"></script>
<script src="js/jquery.ui.position.min.js"></script>
<script src="js/jquery.ui.resizable.min.js"></script>
<script src="js/jquery.ui.dialog.min.js"></script>
<script>
function btnclick(){
$("#confirmation").dialog({
resizable : false,
modal : true,
buttons : {
"Yes" : function() {
$(this).dialog("close");
},
"No" : function() {
$(this).dialog("close");
}
}
});
}
</script>
<style>
.ui-button {
border-radius: 3px;
behavior: url(pie.htc);
}
</style>
</head>
<body>
<button onclick="btnclick()">Click</button>
<div id="confirmation" title="Confirmation" style="display: none">
Are you sure you want to Continue?
</div>
</body>
</html>
I want to give a border radius of 3px for the Yes and No buttons.When I open the popup first,the rounded corners are coming fine in IE 8.But When I again open it after closing this is what I am getting:
Any idea how to solve this?.Thanks in advance.
