Why this html/css looks different in firefox and ie?

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

Answer 2

I just set up a jsfiddle with your code, and FF puts the red and blue parts on differnt rows too. There's an error in your CSS which, when I fixed it, fixed FF and also ran fine in IE8. Which version of IE are you having trouble with?

content:"\00a0";";

should be

content:"\00a0";

Can you confirm that this is just a typo, or does it fix it for you too?