CSS: two identical elements display differently on 2 different websites [closed]

Question

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.

---

This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.

Closed 9 years ago.

Improve this question

On a development site, I have some social widgets set up correctly.

I can't replicate this on the production site, even though I'm sure I'm using the same CSS.

The padding-bottom on li.twitter-balloon is overlapping with the padding-top of li.linkedin-balloon. Why is this occurring on the production site and not on the development site? Thanks.

Answer 1

I think the CSS you are using are not exactly the same.

On your production site, in line 294 (or another line number with the same content) of your style.css file, you have margin-bottom:-10px;, which is the reason why they are different. If you delete this line, they will look the same.

Answer 2

On dev server your css is

.twitter-balloon {
    background: url("images/twitter-balloon.png") no-repeat scroll right 15px rgba(0, 0, 0, 0);
    border-top: 1px dotted #D8D8D8;
    padding: 20px 0;
}

on live its :

.twitter-balloon {
    background: url("images/twitter-balloon.png") no-repeat scroll right 15px rgba(0, 0, 0, 0);
    border-top: 1px dotted #D8D8D8;
    display: block;
    margin-bottom: -10px;
    overflow: auto;
    padding: 20px 0;
} 

just remove margin here