Home/ Questions/Q 7013691
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T22:25:26+00:00

Good day. I’m using plenty of CSS3 effects and I’m having problems rendering the

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0