0

I have such css

.corner-wrapper
{
    display:table;
    position:relative;
    border: 2px solid #69b0ff;  
    margin:5px 0 5px 0;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    behavior: url("PIE.htc");   
}

The rounded corners seams to be added in all IE old versions, it is really cool, but i noticed that margings getting lost. I googled and found some links related to that, looks like there is some bugs behind that. http://css3pie.com/forum/viewtopic.php?f=3&t=92 and http://css3pie.com/forum/viewtopic.php?f=3&t=364

So and my question is - What is the better and more efficient workaround for that?

halera
  • 165
  • 2
  • 9

1 Answers1

2

Here's something that worked for me (I posted it on the pie forum as well) - Put this right after the body tag (does not work if in the header):

<!--[if lte IE 7]>
<script type='text/javascript'>
document.body.onload = function(){
 document.body.style.zoom = '2';
 document.body.style.zoom = '1';
}
</script>
<![endif]-->

Then, in your css, to each "pie"d element that has a bottom margin, add an "expression" statement for the bottom margins like this:

.my_div {margin-bottom: 10px; margin-bottom: expression('10px');}

Borderless elements still not showing correct margins may require a border (something like "border-bottom: 1px solid transparent;" is fine. do not follow it with a "margin-bottom: -1px" to cancel it or it won't work). Also, you will still need to wrap floating elements in the pie'd element in their own wrapper (plain div will do) if you want absolute elements in the pie'd element to appear. (no idea what the connection is, but it works)

nzn
  • 1,014
  • 11
  • 20