Menu
Possible Duplicate:
IE7 display issues (adding extra top margin)
So I have the following css
.socialMediaPlugin {
width: auto;
display: block;
.socialMediaPluginFooter {
margin-top: 15px;
margin-bottom: -12px;
}
And mark up
<div class="socialMediaPlugin socialMediaPluginFooter">
<div class="socialMediaLinks">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_google_plusone_share"></a>
<a class="Pinterest"></a>
<a class="addthis_button_email"></a>
</div>
</div>
And basically the margin-top: 15px; in the socialMediaPluginFooter works fine in all browsers except for IE7 any ideas ?
536
The margin-top CSS property sets the margin area on the top of an element. A positive value places it farther from its neighbors, while a negative value places it closer.
In CSS, adjacent margins can sometimes overlap. This is known as “margin collapse”, and it has a reputation for being quite dastardly. This is an interactive element! Instead of sitting 48px apart, their 24px margins merge together, occupying the same space!
The auto Value You can set the margin property to auto to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins.
margin-top is very buggy in IE7. Use padding-top on the parent element.
http://reference.sitepoint.com/css/margin-top
120
Your problem may stem from your malformed css. Here's how it should be:
.socialMediaPlugin {
width: auto;
display: block;
}
.socialMediaPluginFooter {
margin-top: 15px;
margin-bottom: -12px;
}
Unless you've just mistyped it here, in which case it's another issue
44
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
