CODEWITHSUNDEEP
htmlcssinternet-explorerfirefox
George Carlin
George Carlin

Reputation: 447

inline-table and inline-block issues in IE and FF

my div in chrome

I have 4 inline-block divs inside a block div. As you can see they look OK in Chrome. Looks OK in Opera as well. However, when I see same div in IE and FF it looks like this:

my div in IE

I have tried several tricks like display:inline or zoom:1 but nothing have helped so far.

Here is the CodePen. Check it out with IE and FF to see the problem.

Here is the exact css code of each inline divs which you see in image as well:

#win_logo_1{
    width:46px;
    height:46px;
    background-position:-229px -151px;
    background-image:url(http://topdesignstudio.ir/img/icons/icon_sheet.png);
    background-repeat:no-repeat;
    display:inline-block;
    *zoom: 1;
    *display: inline;
    position:relative;
    margin-left:0px;
    margin-right:0px;
    margin-top:10px;
    margin-bottom:0px;
}

Upvotes: 3

Views: 1052

Answers (1)

George Carlin
George Carlin

Reputation: 447

After all I have a good solution for this. First I used inline-table instead of inline-block for each box of my win logo. Second I increase the width of winLogo (parent of four box) a bit. Third I detect whether if it's IE then I remove maigin-left of my win_logo_2 nad 4. Here is Codepen Which works OK on IE. Still working on FF and Safari

Upvotes: 3

Related Questions