Question

css:

  * {
        margin:0;
        padding:0;
    }

    .blue-button
    {
        width:auto;
        display:inline-block;
    }

    .blue-button:before
    {
        /*background-image:url('blue-button.gif');*/
        background:red;
        width:5px;
        height:21px;
        display:block;
        content:"\00a0";";
        float:left;
    }

    .blue-button span
    {
        background:#00AEEF;
        display:block;
        height:100%;
        text-align:center;
        margin-left:5px;

        padding:3px;
        padding-left:8px;
        padding-right:8px;
        color:white;
    }

body:

<div class="blue-button"><span>abcdef</span></div>

So basicly this is just a div with prepended div using before. I want span inside .blue-button to resize to the text. It works fine on Chrome but fails on IE/FF – in those browsers blue div is in the next row (it should be in the same row as red div). How I can fix it?

Answer 1

This is a problem due to IE being unable to recognize the attribute

display: inline-block;

IE explorer will display it inline, and to achieve the desired effect you need to give the content ‘Layout’ using

zoom: 1;

or similar.

This article was helpful to me, check it out to fully understand what I’m trying to say!

http://flipc.blogspot.co.uk/2009/02/damn-ie7-and-inline-block.html