CSS Float problem Inside List

Hi, I am having trouble getting this layout to work properly. For some reason it looks right in Safari, but not in Firefox or Internet Explorer 6/7.
I have a table of contents, set up as a list, with the page descriptions aligned left and the page numbers inside <span> tags which are floated right.
The problem is that for some reason, the page numbers get bumped down to the next line. I have realized now that this problem can be "fixed" by putting the span (in the HTML) before the Page Description, as you can see I did with the first line, but this is obviously not ideal, as I want things to be laid out in the same order in text-only mode. Does anyone know a solution to this?

You can see the page at this link:
<snip>

Here's the code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Table of Contents</title>
<style type="text/css">
<!--
.toc {
width: 325px;
list-style: none;
padding-left:0;
}
.toc li {
margin: 0 0 .3em;
font: 14px Arial, Helvetica, sans-serif;
border-bottom:1px dotted #039;
}
.toc a {
text-decoration:none;
}
.toc a:link, .toc a:visited {
color:#039;
}
.toc a:hover {
color:#09F;
}
.toc a:active {
color:black;
}
.toc .pg-nmbr {
float: right;
font-weight:bold;
background:#FFF;
padding-left:.07em;
font-size:1.1em;
color:black;
}
-->
</style>
</head>
<body>
<ol class="toc">
<li><span class="pg-nmbr">2</span><a href="#">Terms &amp; Conditions</a></li>
<li><span class="pg-nmbr">3</span><a href="#">Small Toys 2 Cents - 8 Cents</a></li>
<li><span class="pg-nmbr">4</span><a href="#">Small Toys 8 Cents - 11 Cents</a></li>
<li><a href="#">Small Toys 8 Cents - 10 Cents</a><span class="pg-nmbr">4</span></li>
<li><a href="#">Small Toys 10 Cents - 14 Cents</a><span class="pg-nmbr">5</span></li>
<li><a href="#">Small Toys 12 Cents - 16 Cents</a><span class="pg-nmbr">6</span></li>
<li><a href="#">Small Toys 15 Cents - 17 Cents</a><span class="pg-nmbr">6</span></li>
<li><a href="#">Small Toys 17 Cents - 22 Cents</a><span class="pg-nmbr">7</span></li>
<li><a href="#">Small Toys 22 Cents - 25 Cents</a><span class="pg-nmbr">8</span></li>
<li><a href="#">Small Toys 23 Cents - 26 Cents</a><span class="pg-nmbr">9</span></li>
<li><a href="#">Small Toys 25 Cents - 29 Cents</a><span class="pg-nmbr">9</span></li>
<li><a href="#">Toys &amp; Novelties 30 Cents - 35 Cents</a><span class="pg-nmbr">10</span></li>
<li><a href="#">Toys &amp; Novelties 36 Cents - 43 Cents</a><span class="pg-nmbr">11</span></li>
<li><a href="#">Toys &amp; Novelties 43 Cents - 50 Cents</a><span class="pg-nmbr">12</span></li>
<li><a href="#">Toys &amp; Novelties 50 Cents - 60 Cents</a><span class="pg-nmbr">13</span></li>
<li><a href="#">Toys &amp; Novelties 62 Cents - 74 Cents</a><span class="pg-nmbr">14</span></li>
<li><a href="#">Toys &amp; Novelties 75 Cents - 85 Cents</a><span class="pg-nmbr">15</span></li>
<li><a href="#">Toys &amp; Novelties 86 Cents - 1 Dollar</a><span class="pg-nmbr">16</span></li>
<li><a href="#">Inflatable Toys</a><span class="pg-nmbr">17</span></li>
<li><a href="#">Plush Toys</a><span class="pg-nmbr">18 - 19</span></li>
<li><a href="#">Prize Assortment Packs</a><span class="pg-nmbr">21</span></li>
<li><a href="#">Candy</a><span class="pg-nmbr">20</span></li>
</ol>
</body>
</html>

[edited by: swa66 at 10:02 pm (utc) on July 10, 2009]
[edit reason] No links, please see ToS and forum charter [/edit]

CSS Float problem Inside List

Floated Span is Getting Bumped Down a Line

mackit

mackit

jameshopkins

mackit

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week