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

Question

I get this strange CSS error in ie6 / 7 (but not in ie8 or firefox): for some reason, my anchor and <span> , two inline elements that are on the same line, are displayed on different lines. the span also floats to the right!

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 will the floating range be displayed on the line under the anchor? Thanks!

Answer 1

Just apply the left float to the anchor tag, which should fix the problem.

  .sidebartextbg a {float:left;} 

Answer 2

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

Answer 3

I don’t know the answer to your real question, but an easy fix would be to put your anchor to the left or switch the anchor and range labels 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>