1141 posts
  • Bought between 100 and 499 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 1 and 9 users
  • Sold between 10 000 and 50 000 dollars
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

349 posts
  • Bought between 100 and 499 items
  • Has been a member for 5-6 years
  • United Kingdom
kops says

Could the element above it share the same class?

1950 posts Do the Needful
  • Has been a member for 4-5 years
  • Elite Author
  • Sold between 100 000 and 250 000 dollars
  • United States
  • Has attended an Envato Live event
  • Author had a Free File of the Month
  • Envato Studio (Microlancer) Beta Tester
  • Contributed a Blog Post
  • Beta Tester
+6 more
JamiGibbs says

Are you using the HTML5 javascript shiv by chance?

57 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Sold between 1 000 and 5 000 dollars
  • Ukraine
Nekto says

@glossycat

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

- Alex

98 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 3-4 years
  • Referred between 50 and 99 users
  • Romania
  • Sold between 10 000 and 50 000 dollars
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 been a member for 5-6 years
  • Sold between 50 000 and 100 000 dollars
  • Exclusive Author
  • Most Wanted Bounty Winner
  • Bought between 50 and 99 items
  • Poland
  • Referred between 10 and 49 users
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
  • Bought between 100 and 499 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 1 and 9 users
  • Sold between 10 000 and 50 000 dollars
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
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Sold between 1 000 and 5 000 dollars
  • Ukraine
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