internet explorer - CSS Display inline-block issue with IE

Question

I’ve faced with an issue with IE6 & IE7 issue and I was hoping someone had a solution for me other than to not use IE6/7. The cost on the right needs to be on the same line as the label on the left. I'm only able to get to this to work in FireFox, but in IE7, for example, it places cost on the line below even though I'm using inline-block. An yhelp would be greatly appreciated

Note: I turned on borders so I could see what's happening...

Demo of my issue: http://jsbin.com/ilese4/

Here's a picture of how it renders in IE7.

Answer 1

This link can help to solve it: Cross-Browser Inline-Block

The very least you need to make inline-block work cross-browser (incl IE6/7) is:

.my-inline-block {
    display: inline-block;
    *zoom: 1;
    *display: inline;
}

You may need to fix additional quirks; details and explanations are in the link...