How to align buttons (in different forms) horizontally in IE7

Question

I have the following bit of code which comprises of 3 buttons:

<div id="button-panel">
    <form action="../edit/" method="GET">
     <input type="hidden" name="id" value="<?php echo $record->id; ?>" />
     <input type="submit" value="Edit" />
    </form>

    <form action="" method="POST">
     <input  type="submit" name="cancel_btn" value="Cancel" />
    </form> 

  <input type="button" id="boh-url-gen" value="Generate URL" onClick="generateURL();" />                    
</div>  <!-- button-panel -->

Despite my efforts the buttons align vertically in IE7. Currently I have the following CSS applied:

#button-panel *{display:inline-block;}

However, it fails to work for IE7.

Answer 1

This is simply because display:inline-block isn't fully supported by IE7. Reference here.

If you want full support, just float the elements.

#button-panel {
    float:left; /* right */
}

Note, floating an element takes it out of the flow, so you might need to add something like overflow:auto to the parent - assuming the content is collapsing because a fixed height/width isn't set.

Answer 2

IE7 doesn't support display:inline-block on elements which are block be default.

Instead, display:inline makes them behave like inline-block (IE7 is so weird)

So you can use conditional comments to create a stylesheet for IE7, or IE7 CSS hacks, with display:inline. For example:

*:first-child+html #button-panel { /* IE7 hack which is valid CSS */
    display: inline;
}

(IE7 hack from this answer by Alohci)