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!
Could the element above it share the same class?
- Has been a member for 4-5 years
- 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
Probably your article element has float child elements. Try add “overflow: hidden;” for article. I think it must help
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.
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!!
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.