title: CSS/IE7 - Text within div not centered, extra break after div
body: <p>The webpage is rendering with an unwanted line break after the "jabbrs" div in IE7 (but not in Chrome or FF4).</p>
  
  <p>Additionally the text in h1 tag in the "hi" div is not centering as it should be.</p>
  
  <hr>
  
  <p>I've looked around and tried many different things but I seem unable to sort this problem.</p>
  
  <p>Solutions tried:</p>
  
  <ol>
  <li>Changing doctype from strict to transitional</li>
  <li>Playing about with text-align, extra elements, margin:auto and so on.</li>
  </ol>
  
  <hr>
  
  <p>I attach the code I'm working on below, if you want to see the webpage online do ask. I've cut out all elements of javascript and so on to make it easier to see what's going on with the design.</p>
  
  <hr>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"&gt;
  &lt;head&gt;
  
  &lt;meta http-equiv="Content-Type" content="text/html;charset=utf-8" /&gt;
  &lt;style&gt;
  body {
  background-color:#747E80;
  font-family:Arial, Sans-serif;
  }
  
  #hi{
  font-family:'Pacifico', arial, serif;
  margin:0 auto;
  text-align:center;
  display:inline;
  height: 80px;
  width:400px;
  }
  
  #jabbr_form {
  background-color:#F2583E;
  padding:5px;
  }
  
  #main {
  background-color:#77BED2;
  width:600px;
  margin:0 auto;
  padding:5px;
  }
  
  #jabbr{
  background-color:#FFFFFF;
  padding:5px;
  width:590px;
  overflow: auto;
  }
  
  #jabbrs{
  height:400px;
  }
  &lt;/style&gt;
  &lt;title&gt;jabbr&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="main"&gt;
      &lt;br /&gt;
      &lt;div id="hi"&gt;&lt;h1&gt;jabbr away!&lt;/h1&gt;&lt;/div&gt;
      &lt;br /&gt;
      &lt;div id="jabbr"&gt;
          &lt;div id="jabbrs"&gt;&lt;span id="nattr"&gt;Nattr-ing with server...&lt;/span&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;form id="jabbr_form"&gt;
          Name: &lt;input type="text" id="author" /&gt;
          Jabbr: &lt;input type="text" id="msg" autocomplete="off" /&gt;
          &lt;input type="submit" value="rawr" /&gt;&lt;br /&gt;
      &lt;/form&gt; 
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>