Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS Margin-top not working in IE7 [duplicate]

Tags:

css

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 ?

like image 536
StevieB Avatar asked Apr 12 '12 19:04

StevieB


People also ask

How does margin top work in CSS?

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.

Does margin overlap CSS?

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!

How do I set auto margin in CSS?

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.


2 Answers

margin-top is very buggy in IE7. Use padding-top on the parent element.

http://reference.sitepoint.com/css/margin-top

like image 120
iambriansreed Avatar answered Oct 02 '22 01:10

iambriansreed


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

like image 44
Josh Davenport-Smith Avatar answered Oct 02 '22 02:10

Josh Davenport-Smith