title: Text and Image not lining up
body: <p>I can't get my text and image to line up on the same line.  I've got a container called 'contactbar', then the text is h1, and the image is just in the html.  Please help...I've tried everything!!!
  CSS:</p>
  
  <pre><code>#contactbar {
    background-color: #2E2B1F;
    width: 203px;
    height: 35px;
    position: absolute;
    top: 19px;
    left: 0px;
  }
  
  h1 {
    color: #9A8478;
    font-size: 16px;
    display: inline;
    -webkit-margin-before: 0em;
    -webkit-margin-after: 0em;
    height: 56px;
    vertical-align: middle;
    line-height: 1.4em;
  }
  </code></pre>
  
  <p>and here's the html:</p>
  
  <pre><code>&lt;div id= "contactbar"&gt;
    &lt;h1&gt;CONTACT&lt;/h1&gt;
    &lt;img src="images/contactarrow.png" vertical-align="middle" width="21" height="35"    
  vertical-align="middle" alt="linkedin"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's an image of what I'm looking for: <a href="http://www.flickr.com/photos/77703125@N07/8331407232/in/photostream" rel="nofollow">http://www.flickr.com/photos/77703125@N07/8331407232/in/photostream</a></p>
  
  <p>I've also tried absolute positioning, which works, but not the same across all browsers...so I'd like to steer clear of that.  Any help would be appreciated.  Thanks!</p>