How to solve the disapearing of top margins in element when using CSS3 Pie in IE7

Question

Good day.

I'm using plenty of CSS3 effects and I'm having problems rendering the same effects in IE 7 and 8 with the help of CSS3 Pie.

It works very well for some of the effects I require, however one of the known issues of CSS3 Pie is layout, more specifically CSS3 Pie makes top margins disappear in the element where it is applied, I only had such problem in IE 7 so far, IE 8 doesn't show the same issue.

I ask if someone knows how to solve this problem, I would like to keep it simple only using CSS to solve such issue, I think a different approach not restrained to CSS might be needed thats why I ask for help.

<style type="text/css" media="screen,projection">
#centerContainer {
        width:940px;
        margin-top:76px; /* without effect in the layout when CSS3 Pie is applyed */
        min-height:200px;
        margin-left:auto;
        margin-right:auto;
        margin-bottom:60px;
        background-color:#FF6;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
        -moz-box-shadow: 0px 0px 10px #000;
        -webkit-box-shadow: 0px 0px 10px #000;
        box-shadow: 0px 0px 10px #000;
}

.css3pie { 
        behavior: url(http://localhost:999/css/PIE.htc)\9;
}
/*Note the "\9" is to limit this CSS property to IE 8 and lower since I didn't noticed the need for CSS3 Pie in IE 9 and above */
</style>


<div id="centerContainer" class="css3pie">
</div>

Solutions and suggestions are appreciated. Thank you.

score 1 · Accepted Answer · answered Dec 28 '11 at 13:08

I've used a wrapper div around the centerContainer div, and set the wrapper div to a padding-top equal to the same value of the margin-top centerContainer div.

<style type="text/css" media="screen,projection">
#wrapper {
        paddin-top:76px;
/* same effect as the margin-top:76px; in the centerContainer */
}
#centerContainer {
        width:940px;
        min-height:200px;
        margin-left:auto;
        margin-right:auto;
        margin-bottom:60px;
        background-color:#FF6;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
        -moz-box-shadow: 0px 0px 10px #000;
        -webkit-box-shadow: 0px 0px 10px #000;
        box-shadow: 0px 0px 10px #000;
}

.css3pie { 
        behavior: url(http://localhost:999/css/PIE.htc)\9;
}
/*Note the "\9" is to limit this CSS property to IE 8 and lower since I didn't noticed the need for CSS3 Pie in IE 9 and above */
</style>

<div id="wrapper">
    <div id="centerContainer" class="css3pie">
    </div>
</div>

How to solve the disapearing of top margins in element when using CSS3 Pie in IE7

1 Answers1