I am confused, what is it exactly that you are trying to accomplish as what you have posted above is simply just a class with a property which should work in IE7+ and all modern browsers without any issues, could you please explain the issue your having a little bit more.
Firefox and Chrome are pretty reliable browsers, so it’s more likely that you need to rethink how you are going about this. The only browser that really needs hacks is IE in its older versions. As soon as you start thinking about hacks for other browsers, it’s a sign you are doing something wrong. As SgtLegend said, we need to see more—preferably a live link.
It’s probably simple to fix, but I don’t think we have enough info here. It wasn’t clear from your first post which browser you needed help with, but anyhow, it should be easy to remove the bottom gap, but there isn’t really enough info above for me to help. Could you post a test page somewhere?
Based on what you’ve supplied, the gap between #social_media_outer and #element-column-right-alpha-outer is due to the 35px top margin on the latter. Why the others browsers ignore the margin I don’t know. What happens when your remove or reduce the margin?
You are wanting to get rid of the gap in Chrome aren’t you?
I’m confused how a hack for Firefox would fix Chrome.
You’ll need to try and build a working demo that exhibits the problem as there are too many variables in the above code for us to give an accurate answer.
It sounds like an issue of margin collapse and parents not clearing their floated children. Make sure parents that hold floated content contain their children.
There are hacks you can use for webkit but it sounds like the issue could be cured with a proper structure first so that is what we must address first before resorting to hacks.