CSS: div with background image not displaying - css

Question

At this site, there is a div.social below the Online Bookings at top right of the screen.
http://imgur.com/a/QhlIL
Note: I've not been able to upload images to SO for months - always says the image is too large (> 2MB) when it is 140 KB.
For some reason .social is not displaying, nor its sub-elements:
<div class="social">
<a title="Trip Advisor" href="#" target="_blank">
<div class="tripAdvisor"></div>
</a>
<a title="Facebook" href="#" target="_blank">
<div class="facebook"></div>
</a>
<a title="Instagram" target="_blank" href="#">
<div class="instagram"></div>
</a>
<a title="YouTube" target="_blank" href="#">
<div class="youtube"></div>
</a>
</div>
<style>
.headRight .tripAdvisor {
background: url(../images/social/tripadvisor.png) no-repeat;
width: 28px;
height: 22px;
}
</style>
.social is set to display: block; and there is enough room to fit the icons in.
Help appreciated.

Answer 1

Just checked the bug on your website.
You must apply the style to the child divs of .social
.social div {
display: inline-block;
margin-right: 15px;
display: inline; // remove this line
zoom: 1;
}
remove the
"display: inline"
Just keep
.social div {
display: inline-block;
margin-right: 15px;
zoom: 1;
}
from that class. Will work perfectly.