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.

alt text

Now I saw it's a duplicate of stackoverflow.com/questions/1994667/… and stackoverflow.com/questions/608172/… — bluish
– bluish, Commented Jan 20, 2011 at 17:05

bluish · Accepted Answer · 2013-06-25 16:13:25Z

17

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

edited Jun 25, 2013 at 16:13

answered Jan 20, 2011 at 17:03

bluish

27.5k28 gold badges126 silver badges185 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Evan Over a year ago

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

Collectives™ on Stack Overflow

CSS Display inline-block issue with IE

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related