Question

Well I have two buttons, each image in a span, and one should be positioned on top of the other, with the bottom one on top of some text, and all of it to the right of one big image. But in internet explorer the images and text do not stack.

Firefox:
https://i.stack.imgur.com/Uo9SX.png

Internet Explorer:
https://i.stack.imgur.com/cENPC.png

This is the current code:

    <span class="block">
        <img src="images/application.png" alt="Screenshot" width="569px" height="285px">
    </span>
    <span class="block">
        <a href="portable"><span id="button_portable"></span></a><br>
        <a href="installer"><span id="button_installer"></span></a><br>
        <a href="http://download.microsoft.com/download/1/B/E/1BE39E79-7E39-46A3-96FF-047F95396215/dotNetFx40_Full_setup.exe"><span style="font-size:1em">(Requires .NET framework 4.0)</span></a><br><br>
        <a href="/changelog.php"><span style="font-size:1.3em">Changelog</span></a>
    </span>

And CSS:

    span.block {
        display: inline-block;
        padding: 20px;
        vertical-align: middle;
    }
    span[id="button_portable"], span[id="button_installer"] {
        background: url("images/download.png") no-repeat scroll 0 0 transparent;
        float: left;
        height: 70px;
        margin-bottom: 10px;
        width: 250px;
    }
    span#button_installer {
        background-position: 0 0;
    }
    span#button_installer:hover {
        background-position: 0 -71px;
    }
    span#button_portable {
        background-position: 0 -142px;
    }
    span#button_portable:hover {
        background-position: 0 -213px;
    }

I have looked up several changes and tried them all, but none of them seemed to work.

Answer 1

Replace float: left; with display: inline-block;.

See demo fiddle.

Tested on Win7 in IE7, IE8, IE9, Chrome 12, FF 4.