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

sometimes it helps to setup zoom: 1; or position: relative; to fix some ie loolz.

Answer 2

Don't know the answer to your actual question, but an easy fix would be to float your anchor left or switch the anchor and span tags in your code. (span, then anchor) IE

<div class="sidebartextbg">
<span class="notificationNumber">2</span>
<a href="journey.php" style="width:50%" title="">Journey</a>
</div>

Answer 3

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

  .sidebartextbg a {float:left;}