Margin difference between Chrome and other browsers

[Spiekerboks]

Hi all,

For a client I have made some changes to a WordPress theme: http://themeforest.net/item/punch-responsive-portfolio-wordpress-theme/3036959.

This theme has a build in slider (Flexslider) that is full width in the original theme but should be smaller and floated to the side on the client site. Unfortunately, an unwanted top-margin appears above this slider when viewed in Chrome. Other browsers (Firefox, IE10) ‘play nice’.

The client has allowed me to link to the work in progress but, to prevent search engines from indexing the demosite, it is password protected. Username: apps & Password: apps.

Please have a look (in Google Chrome and other browsers) at http://www.icecoldapps.com/newwebdesign/?portfolio=servers-ultimate-pro, especially the slider on the right.

Normally, rendering in ‘grown up’ browsers like Chrome and Firefox does not present any problems but little difference has got me struggling. Does anyone see the simple solution that I sofar have missed?

Thnx in advance!

[Merri]

This might be a bug in WebKit where it fails to collapse top margin of a floated child element in this specific case (which I believe would be the correct behavior). Without getting too much into details the simple way to fix this is to add:

.portfolio {
  padding-top: 1px;
}

And then the margin is calculated the same way in all browsers.

In case you don’t know how margins work, they collapse so that only the biggest one counts. So if you put block element with a bottom margin of 2em and the next block element right after it has a top margin of 1em, then the margin between the elements is 2em.

Margin from child elements is also moved to a parent element. So if the first child element in the margin-top: 1em; block element is another block element, but it has a top margin of 3em, then the margin between the 2em and 1em elements will be 3em. The 3em child element instead starts right from the top of the 1em element.

But then there are exceptions. If you add top padding to the 1em element then the child element’s top margin can’t collapse to play with the 2em element. If padding is 1px then you’d end up seeing 2em margin between the block elements, 1px top padding of the 1em element and then 3em top margin of the first child element.

This sounds quite complex when written like this, but it is a simple concept once you get the hang of it.

[Author]

Posts