I am using the CSS 3 PIE include so that I can have rounded borders on my popup in IE. However, in IE, the popup is not rounded on the pageload, but when I mouse over it, it shifts to the top-left corner of the container, which is positioned absolutely, and THERE it has rounded borders.
Here is the HTML:
<div class="popupWrapper" id="editMsgWrapper">
<div class="popupDiv" id="editMsgContainer">
And here is the corresponding CSS:
.popupWrapper {
display:none;
left:0;
margin:0 auto;
position:absolute;
text-align:center;
top:0;
width:100%;
z-index:601;
}
.popupDiv {
text-align: left;
position: relative;
top: 100px;
margin: 0 auto;
width: 500px;
border: none; /*1px solid #FFF;*/
font-size: 12px;
background: #FFF;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;
behavior: url(PIE.php);
position: relative;
}
Any idea as to why the popupDiv is shifting to the absolute div on a mouseover?
Thanks!