CSS: Why is my floated <span> being displayed below an <a>nchor in IE6/7 but not IE8/FF

Question

i'm getting this weird CSS bug in ie6/7 (but not in ie8 or firefox): for some reason, my anchor and <span>, two inline elements, which are on the same line, are being displayed on different lines. the span is floating to the right, too!

Here's the HTML:

  <div class="sidebartextbg"><a href="journey.php" style="width:50%"
   title="Track past, present and future milestones during your employment">Journey</a>
<span class="notificationNumber">2</span>
    <!-- JOURNEY COUNT: end -->
  </div>

and here's the CSS:

.sidebartextbg {
background:url("../images/sidebartextbg.gif") repeat-x scroll 0 0 transparent;
border-bottom:1px solid #A3A88B;
font-size:14px;
line-height:18px;
margin:0 auto;
padding:5px 9px;
width:270px;
}
.notificationNumber {
background:url("../images/oval_edges.gif") no-repeat scroll 0 0 transparent;
color:#FFFFFF;
float:right;
padding:0 7px;
position:relative;
text-align:center;
width:17px;
}

so: why would the floated span be displayed on the line under the anchor? Thanks!

Answer 1

Just apply a left float to your anchor tag, that should fix the problem.

  .sidebartextbg a {float:left;}