CODEWITHSUNDEEP
cssinternet-explorerinlineblock
Evan
Evan

Reputation: 3501

CSS Display inline-block issue with IE

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

Upvotes: 6

Views: 20973

Answers (1)

bluish
bluish

Reputation: 27292

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

Upvotes: 17

Related Questions