Question

I’ve got a puzzling problem in that a certain bit of HTML displays fine in all modern browsers and IE7, but completely fails in IE8. I’ve racked my mind as to which CSS could remedy this problem but I’ve come up short every time.

If you look at this link in chrome, near the bottom you’ll notice FB/Twitter share buttons, but if you look at the corresponding space in IE8, there’s nothing. Could someone please check it out and let me know, I’m stumped…

The CSS code is:

body div.mr_social_sharing_wrapper {
  clear: both !important;
  overflow: hidden !important;
  height: 40px !important;
  width: 960px !important;
  z-index: 2000 !important;
  line-height: 30px !important;
  float: left;
}

span.mr_social_sharing, 
span.mr_social_sharing_top {
  float: left;
}

And yes, I know using !important is poor form; it was inherited and not by choice 🙂

Answer 1

Seems to be solved by removing the display styles (you had both display: inline-block and display:block) and float: left from span.mr_social_sharing_top.

If there was a good reason for needing the display styles (trouble in other browsers?) you could also add fixed widths to these spans to solve the problem.