Why Is Safari 4/Mac Not Rendering Top and Bottom Margins in This Nested Div

Why is Safari 4 / mac not rendering top and bottom margins in this nested div?

It's a normal weird behaviour calling margin (edited, sorry i'm french) collapse.
To simply avoid it add overflow:auto; on the container.

.background {background-color:#990000; overflow:auto;}

Margin not working only in Safari (element is at the bottom of the page)

You can add a div with the size of your bottom and make it transparent.
html:

<div id='tr-footer'>
</div>

css :

#tr-footer{
height: ?px;
width:100%;
background:transparent;
}

CSS Top-Margin Issue

You're running into a common problem called "collapsing margins." Basically, whenever vertical margins touch (even when one element is inside another element), the margins collapse.

In this case your margin property on the inner div is collapsing into the margin-bottom: 20px; property on your outer div. To fix this, add a little padding or a border around the containing element.

Just tried this using your code and it works:
http://jsfiddle.net/hWPyD/2/

More info on collapsing margins:
http://www.w3.org/TR/CSS2/box.html#collapsing-margins

iOS Safari Is Breaking a Centered Nested Div Randomly -- Is This a Webkit Issue?

First, everyone who downvoted me can DIAGF. You are all dicks.

Secondly, WebKit is backwards. My problem stemmed from poor Apple documentation, and a lack of general WebKit information. It would be great to ignore it, but if you want something to work on iOS you should probably start there as other engines adapt better than the other way around.

Finally, the answer was found here: https://codepen.io/shshaw/full/gEiDt

Someone who definitely is a good human, with a soul.

The relevant code change was this:

.checkmark  {
visibility: hidden!important;
position: absolute!important;
margin: auto !important;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: auto;
height: auto%;
display: -webkit-box !important;
display: -ms-flexbox!important;
display: -webkit-flex !important;
display: flex !important;
-webkit-box-pack: center !important;
-ms-flex-pack: center !important;
-webkit-justify-content: center !important;
justify-content: center !important;
-webkit-box-align: center !important;
-ms-flex-align: center !important;
-webkit-align-items: center!important;
align-items: center!important;

}

You hopefully can ignore the !importants :-). I'm too lazy to edit the core css of the swiper.js and onsenui framework.

leaking margin: unexpected offset due to nested DIVs

The reason why it is not working is that your vertical margin in CSS is collapsing, which is expected behavior.

Remove the margin from #inner, and instead specify a padding: 50px; to your #outer to get the desired result:

* {
    margin: 0;
    padding: 0;
}

body {
    color: white;
    background-color: blue;
}

#outer {
    padding: 50px;
    background-color: red;
}

#inner {
    background-color: green;
}

For more information on Vertical Margin Collapsing, I recommend you read the following article:

CSS - Auto-height and margin-collapsing

Difference of layout on Safari with margin-right negative

I'm not sure what you expect to happen with the CSS in the JS fiddle. You are delving into undefined behaviour. I say this because:

• 'C' is floated but does not have a defined width. This leads to issues in various browsers depending on the complexity of the layout.

• None of the floated elements are ever cleared. When floating it is imperative that a clearfix of some description is used, whether it is clear:both, etc.

If you tweak the mark-up and add a clear-fix, you see that the content is always 239px. See http://jsfiddle.net/eaFn9/

However, it seems like the relatively positioned item 'E' and margin is having a negative impact on the width calculation, as Chrome's web inspector seems to always report oddly for the negative margin on this element.

If you play around with this in web inspector you can see it's almost as if the negative margin is the cause of the drop. I think it may be due to a container that does not have a width, and isn't position relative in itself.

How to fix?

Personally, I would want to re-write your layout to include fixed widths on all floats, reduce nesting of floats and clear where possible. It seems overly complex but without a real world use case it's hard to rewrite.

However, It seemed to me that you can wrap 'B2' + 'E' elements in a wrapper that is floated and relatively positioned, then use absolute positioning on 'E' to give the same affect and remove the negative margin.

This is the JSFiddle I came up with: http://jsfiddle.net/jV3Ub/

flex-wrap not working as expected in Safari

It seems this is a bug in Safari. In a separate issue, I tested using the min-width in place of auto in lines where you say something like -webkit-flex: 1 1 auto;.

This question has some info: https://stackoverflow.com/a/30792851/756329

---

Related Topics