Another question on inline-block and how to make IE and Firefox et al work the same

I've been trying to do something as a learning exercise that I thought should have been fairly simple but can not get it to work on IE 8. I am trying to just draw a web page that looks like a little dialog, with a title element, body, and a footer with an OK and Cancel button. Below is the simple example (no buttons for now) that looks fine in Firefox, I get a nice little square in the upper left of the window. Of course IE draws it as a huge, full width and height square. The key is that I do not want to specify a width, since I plan on using this layout many times with different data, I would like it to expand to fit. I found some comments about setting setting zoom: 1 and then adding *display: inline but I cannot get it to work. Is there an fairly easy solution or do I just need to give up and use tables? Thanks

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>HI THERE</title>
  <style>
  .dialog {
    background: red;
    display: inline-block;
    zoom: 1;
    *display: inline;    
  }
  .dialog-title {
    background: blue;
    margin: 10%;
  }
  .dialog-item {
    background: yellow;
    clear: both;   
  }
  .dialog-footer {
    background: green;
    margin: 10%;
  }
  .dialog-ok {
    display: inline;
    float: left;
    background: black;
  }
  .dialog-cancel {
    display: inline;
    float: right;
    background: brown;
  }
  </style>
  </head>
  <body>
  <div class="dialog">
    <form>
    <div class="dialog-title">DIALOG TITLE</div>
    <div class="dialog-item"><input type=text name=item1 size=20 value="ITEM1" /></div>
    <div class="dialog-item"><input type=text name=item2 size=20 value="ITEM2" /></div>
    <div class="dialog-footer">
      <div class="dialog-ok">button1</div>
      <div class="dialog-cancel">button2</div>
    </div>
    <div style="clear: both;"></div>
    </form>
  </div>
  </body>
</html>

Solution

This doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

causes Quirks Mode.

The problem will be resolved if you switch to the full "HTML 4.01 Transitional" doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Or, even easier, the HTML5 doctype:

<!DOCTYPE html>