Question

I have a page that displays two links side by side. This works on every browser except IE6.
Here’s the link to the fiddle. Does anyone know why this happens, and how to fix it?

Result on IE6:

Answer 1

That’s because IE 7 and lower doesn’t support display:inline-block on a default block element.

If you want an element with display:inline-block you can:

• Use a default inline element (for example <span>) and set display:inline-block to it
• Use a default block element (for example <div>) and set display:inline to it

You have <div> elements, so you need:

<!--[if lte IE 7]>
<style type="text/css">
.dialog-button, .horizontal-dialog-divider {
    display: inline;
}
</style>
<![endif]-->

See it here: http://jsfiddle.net/uQUTc/1/

It works on IE7, but maybe on IE6 this trick doesn’t work (I don’t have it so I can’t test it).

But seriously, why are you programming for IE6? It’s very old and it isn’t a compliant browser.

Edit:

If you want to align the elements, you can use

.dialog-button,.horizontal-dialog-divider,.dialog-text{vertical-align:middle}

See it here: http://jsfiddle.net/uQUTc/3/