1141 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 1+ members
  • Has sold $40,000+ on Envato Market
  • Has collected 100+ items on Envato Market
+2 more
KarmaThemes says

Oh my god, really, I can’t help myself. After lots of time passed finding the cause of a huge top margin in my markup, I found such a strange thing… I got this article element, and I added a margin-bottom: 60px to that element. Now the problem is, a margin-top with the same number gets added automatically to that element as well.

It does not matter if I put margin: 0px 0px 60px 0px or margin: -60px 0px 60px 0px, it’s just not doing what I say. Firebug does not even show the yellow bar for the margin at the top (maybe that’s why a margin-top: 0 !important; won’t even work), it’s just moved down without any way to solve it but to remove the margin bottom.
I do not have any margin top declared for the article element somewhere else in my CSS .

I only got the file on XAMPP so I cannot show you anything, but maybe someone has encountered this before?

Thanks for any tipps!
Kind regards

353 posts
  • Has been part of the Envato Community for over 5 years
  • Has collected 100+ items on Envato Market
  • Located in United Kingdom
kops says

Could the element above it share the same class?

1950 posts Do the Needful
  • Has sold $125,000+ on Envato Market
  • Elite Author: Sold more than $75,000 on Envato Market
  • Has been part of the Envato Community for over 4 years
  • Has referred 10+ members
+10 more
JamiGibbs says

Are you using the HTML5 javascript shiv by chance?

57 posts
  • Has been part of the Envato Community for over 4 years
  • Has sold $1,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+1 more
Nekto says

@glossycat

Probably your article element has float child elements. Try add “overflow: hidden;” for article. I think it must help ;)

- Alex

106 posts
  • Has been part of the Envato Community for over 3 years
  • Has referred 50+ members
  • Has sold $40,000+ on Envato Market
  • Has collected 10+ items on Envato Market
+2 more
ThemeFuzz says

Hi!

i think you are experiencing the “collapsing margins issue”.

more details can be found here :

Colapsing margins

If you cannot resolve it you can contact me from my profile page and I’ll help you

best regards, Stefan

741 posts
  • Has referred 10+ members
  • Has sold $40,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Had an item featured on Envato Market
+4 more
Orbital_Themes says

I remember experiencing something similar once when I tried to test some CSS quickly. I’ve quickly written few HTML tags and applied bottom margin to the one of the first elements in a document end ended up with huge white space on the top. The issue was similar to yours. I don’t remember what it was exactly, but it’s possible that it was related to floating.

1141 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 1+ members
  • Has sold $40,000+ on Envato Market
  • Has collected 100+ items on Envato Market
+2 more
KarmaThemes says

Hi everybody and thanks for all the fast tipps!

The element above the article neither is an article nor does it have a margin, that’s why kops and zauan’s solutions did not work but thanks anyways guys!
Hi Jami, I do use HTML shiv but I’m experiencing this in FireFox and I set the HTML shiv to only IE lower than 9.
And woops, the overflow:hidden solved the issue… Thanks a bunch Nekto! But what is happening there that causes this? :/ Something with the floating, but like how?

I love this forum :) Thanks to all of you again and all the best!!

57 posts
  • Has been part of the Envato Community for over 4 years
  • Has sold $1,000+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+1 more
Nekto says

But what is happening there that causes this? :/ Something with the floating, but like how?

As I remember IE just don’t wrap inside floating elements. If you inspect your article element in Firebug, you’ll see that in IE it has a height equal to margin-top value.

You’re welcome ;)

- Alex

by
by
by
by
by
by