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.

Solution

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...

Comments

[Evan]

i wasn't trying to be fancy to make display-block work for IE, I'm just trying to get my example to work more or less. this solution here will suffice by adding a class to the left and floating it like I did for the cost on the right: jsbin.com/araco4