Overflow:Hidden Messing with Margins in Chrome and Safari

Overflow:hidden messing with margins in Chrome and Safari

Removing the margin from main seems to fix it:

http://jsfiddle.net/kR7rs/3/

What I think it happening is that when overflow:hidden is set, the entire element wraps around the floats instead of the text within the div. So this gives the result in the fiddle. Then if you set a margin on it also, the width is decreased further by the left padding.

Kind of seems like a bug.

(Don't have FF right now to test it and see if it breaks it for FF.)

CSS height:0 and overflow:hidden with margin has a different behavior on safari

My work around this was to instead of setting the height:0px, replace it with a small value such as height:0.01px and it produces a uniform results across the browsers i used test. But I hope someone has a better solution.

Safari wrong margins - working fine in Chrome & FF

The problem is caused by a missing left declaration. Add this to your CSS:

#pull_link {
    left: 50%;
}

Margins drastically different in Safari than Chrome and Firefox

I took out width:100% and height:100% and added min-width:100% and it did the trick.

Why there is an unintended margin-right in Safari5?

This seems indeed to be a bug in older Webkit versions. I found another question about the same issue.

There are workarounds. The most obvious is to avoid overflow: hidden to clear floats, and to use clearfix instead.

Since nobody answered to my questions, I try to give them myself:

Is this a Safari-5-Bug?

It's a Webkit Bug

If it is a Bug, does it have a name, with which I can google some workarounds?

No name found, apparently there are not many people who layout websites as I do... (and still want to support old browsers).

Can I detect somehow, which Browsers are affected with this behaviour, to define some exception rules for them.

If you really want to define exceptions, you can make such ugly things in JavaScript

var webkitCheck = /AppleWebKit\/([0-9.]+)/.exec(navigator.userAgent);
if (webkitCheck) {
    var webkitVersion = parseFloat(webkitCheck[1]);
    if (webkitVersion < 535) {
        jQuery('html').addClass('oldWebkit');
    }
}

< 535, because 534.59.10 is the Webkit version of the latest Safari5 version, and in Safari6, this bug does not occur anymore.

But thanks, @Era and @NoobEditor for your comments.

Chrome not picking up margins for centering, works in safari and firefox

There are a few issues with the CSS styles you have on the <span class="main-nav-logo">Logo</span>

You are using position: fixed which ignores the left and right auto margins.

You can fix by changing the styles to this:

.main-nav-logo {
  display : block;
  text-indent: -9999px;
  z-index: 11;
  position: fixed;
  left: 50%;
  width: 20%;
  height: 100px;
  margin-left: -10%; /* half of the width of the element */
  color: #fff;
  text-decoration: none;
  border: 0;
  padding : 0;
  background : url('../images/logo.png');
  background-size: 100px 100px;
  background-repeat: no-repeat;
  background-position: center;
}

By adding left: 50% and margin-left: -10% which is half of the width: 20% you will get it centered.

Here is a JSFIDDLE to show the solution minus the text-indent: -9999px; to show its centered.

Hope that helps.

Extra padding on Chrome/Safari/Webkit -- any ideas?

Your page has an element near the top with a top-margin that extends outside your page wrapper. If you have this:

<div class="wrapper" style="margin: 0">
  <div class="section" style="margin: 40px 0"> Stuff! </div>
</div>

Then the .section element will be positioned at the top of the .wrapper and its 40px margin will extend out the top. This has to do with the way margins collapse together so that two margins between elements don't accumulate. You can prevent this by adding overflow: hidden on the wrapper.

In your markup, it's the .mini-search element that has a 40px top margin. Either remove this margin, or add overflow: hidden on the fieldset that contains it.

---

Related Topics