Span doesn't align with h1 in ie6

Question

I have inside a div, one h1 tag followed by a span tag which are one next to the other, but the span is floating to the right. It works in firefox, chrome, and internet explorer 7 and 8, but not in ie6. In ie6 the h1 tag is bigger for no reason, so the span tag stays bellow it.

Heres the code:

     <div style="width: 740px; float:left">

        <div id="article-header">

            <h1><span>Text</span></h1>

            <span class="breadcrumb">Link1 > Link2</span>

        </div>

The Css:

  #article-header h1
  {
     font-family: Verdana, Arial, Helvetica, sans-serif;
     font-size: 10px;
     font-weight: bold;
     color: #F2612F;
     text-transform: uppercase;
     display: inline;
     position: relative;
  }
  .breadcrumb
  {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 9px;
    float: right;
    text-transform: uppercase;
    vertical-align: baseline;
    margin-top: 0px; 

    text-align: right;
    display: inline;
  }

Answer 1

You may need to use a CSS Reset File to get rid of random, predefined styles in IE6. This eliminates all sorts of "stealth" styles that change from one browser to the next.

Answer 2

Don't use a float:left on the H1, just use display:inline

If you really need to use float:left for some reason, then try adding this to an IE6 only stylesheet:

#article-header h1{
   display: inline;
}

It shouldn't affect the rendering negatively, but combined with a float in IE6 the effect is different than a plain display:inline