CSS: Why is my floated <span> being displayed below an <a>nchor in IE6/7 but not IE8/FF
- by gsquare567
i'm getting this weird CSS bug in ie6/7 (but not in ie8 or firefox): for some reason, my nchor and , two inline elements, which are on the same line, are being displayed on different lines. the span is floating to the right, too!
heres 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 nchor? thanks!
