Setting CSS3Pie margins to zero is a great way to ensure a

Here is my CSS code:

.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 are showing up in all old versions of Internet Explorer, which is great. However, I've noticed that the margins seem to be disappearing. After doing some research, I found a few articles discussing this issue and potential bugs behind it. and

My question is - What is the most effective workaround for this problem?

internet-explorercsscss3pie

Answer №1

Sharing a helpful tip that I found effective (originally posted on a pie forum) - Insert the following code right after the opening body tag (make sure it's not in the header section):

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

In your CSS, for any "pie"d element with a bottom margin, include an "expression" statement to adjust the margins like so:

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

If borderless elements still lack correct margins, consider adding a transparent border (e.g., "border-bottom: 1px solid transparent;"). Avoid using "margin-bottom: -1px" afterwards as it may disrupt the functionality. Additionally, ensure that floating elements within the pie'd element are enclosed in their own wrapper (simple div will suffice) if you want absolute elements within the pie'd element to display properly. The reason behind this requirement is unclear, but it has been proven to work.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the reason for incorporating the footer within the container?

To see the issue in question, please visit: The footer needs to span the full width. Here is the code snippet for the page: <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <div class="container"> <div c ...

phphtmlcsswordpresstwitter-bootstrap

Ways to display a block within the visible window by simply clicking on another block

I'm in need of assistance with this issue. Please take a look at the fiddle link below to understand the specific requirement. $(document).ready(function(){ $('a.n-stand-b, a.n-stand-a, a.e-stand-b, a.e-stand-a, a.w-stand-b, a.w-stand-a, a.s-s ...

javascriptjqueryhtmlcss

The appearance of a <div> element results in a border being applied to a different element

When hovering between the two borders, an undesirable (albeit very small) border appears around them. Can anyone assist me with this issue and explain why it is happening? I have attempted to set a transparent border on each element but without success. R ...

htmlcssbordertransition

Adjust the size of iCheck jQuery radio buttons

I have implemented the iCheck Plugin for radio buttons in Angular Directive, but I am facing an issue with resizing the radio button to a smaller size. Does anyone have any suggestions or solutions for this? ...

cssangularjsicheck

The media query for mobile is not functioning properly

Hello, I have a page with MVC that includes CSS for iPad and mobile devices. The media query for iPad (@media only screen and (min-device-width: 768px) and (max-device-width: 1024px)) works perfectly, but I am struggling to get the media query for mobile ...

cssmobilemedia-queries

`Can a creation of this nature be accomplished?`

In my text input field, users can type messages to send to me. I'd like to add buttons on the page with symbols like "!", "XD", and "#". When someone clicks on a button, such as the "!" button, that corresponding symbol should be inserted into the tex ...

javascripthtmlcss

What is the best way to rearrange columns in bootstrapping version 3

In the process of developing a responsive website with the use of bootstrap 3, I am faced with the task of rearranging columns for the mobile version. The layout of the home page has been attached for reference, along with the desired layout for the mobi ...

htmlcsstwitter-bootstrap

When text-indent is assigned a percentage value, what determines the width that is used in the calculation?

Here's another issue I encountered while working on revising my Textarea Line Count plugin (shameless promotion). CSS's text-indent property allows for creating white space before the first line of text. It can be specified in various units like ...

javascriptjquerycss

Issue with Nav Bar Toggle not changing text to white color

Query I'm baffled as to why the text in the navigation bar (when opened with the Burger Menu) refuses to turn white. I've exhausted all efforts to change the color to white. Please assist me in pinpointing why the text remains unaffected when t ...

javascripthtmlcssuser-experience

How can I animate scrolling up or down using jQuery and CSS?

I have a a element that triggers an action when clicked: <a href="#" class="hel" onclick="YPCP1_();">Scroll down</a> Also, function YPCP_(){ var scroll = $(window).scrollTop(); window.scrollTo(0, 600); } The function successfully sc ...

javascriptjqueryhtmlcss

Can you explain the concept of fallback color in CSS?

Can you explain to me what a fallback color means? I searched online and found out that it is used to display a color when the specified format is not supported by browsers, like Internet Explorer. Is there anything else I should know about fallback colors ...

cssangularjshtml

Steps to access a unique custom drop-down menu in an upward direction

Presently, I am developing a customized AngularJS drop-down feature, which is outlined in the following HTML structure: <div> <label></label> <div> <a ng-class="{active: popover}"> <div></div> <!- ...

htmlcssangularjsangularjs-directivetwitter-bootstrap-2

The spacing between elements in Flexbox is too excessive, creating an overly wide gap

How can I maintain a fixed 40 pixel gap between columns in flexbox without it increasing as the screen width widens? (I apologize for the brevity of this description, but there are no additional details to provide at this time) .browser-box { max-wid ...

htmlcssflexbox

Labels appear to float and overlap with input fields that already contain data

Having trouble with input values overlapping the label when pre-filled? https://i.sstatic.net/ECuwr.jpg If you want to ensure that the label does not overlap when the input is pre-filled and also have a smooth transition effect when the user removes the ...

htmlcsscss-transitions

Utilizing CSS and HTML to center elements

My jquery datepicker is set up to display color dots above certain days to represent information for that day. I'm running into some CSS issues. I'm trying to center the dots with the corresponding numbers, but when I do that, the days with dot ...

jqueryhtmlcss

css the vertical column is unable to reach 100% vertical

Check out my website at I need help getting the black column with my thumbnails to extend all the way down on the site. Here is the CSS code for the thumbnails: #thumbnails { position:absolute; top: 110px; width: 190px; height: 100%; ...

css

How to center text in MatButtonToggle within angular material?

I'm facing a challenge in customizing the MatButtonToggle as I am having issues with centering the label: https://i.sstatic.net/LVzrm.png Here is the template for reference: <mat-button-toggle-group name="condition" aria-label="Condition"> ...

cssangulartypescriptsassangular-material

Navigating Joomla with a Menu specifically designed for articles within a specific category

After recently starting to navigate Joomla, I've hit a roadblock with a seemingly simple task. I have multiple articles, each belonging to a specific category. My goal is to create a menu that displays all articles within a chosen category. When sele ...

phpcssjoomlajoomla3.0joomla-extensions

Maintain the style of the main navigation menu when hovering over the sub-navigation items

I am currently in the process of redesigning the navigation bar for a specific website. The site utilizes Bootstrap, with a main navbar and a secondary navbar-subnav. While I have been able to style both navs accordingly, I am encountering difficulties whe ...

cssnav

Contrast between JQuery .display/.conceal and CSS view:invisible

I'm working on a way to toggle the visibility of a Div element using JQuery: $("#Progress").hide("fast"); But I want the #Progress div to be hidden by default. <div style="height:30px;margin-top:5px"> <div id="Progress" style="visibil ...

jquerycss