Relative positioning shifts - need alternative (IE FF)

HTML & CSS
1 
.C {
   width:240px;
    color:#000000;
    background:#FFFFFF;
        padding:6px 1px 3px 15px;
    border-right:2px solid #C4C4C4; 
    border-bottom: 2px solid #C4C4C4;
    border-left:2px solid #C4C4C4;
    font-size:12px; font-weight: 600; font-family: Arial, Helvetica, sans-serif;
    display:block;
    text-decoration:none;
}

Following works, aligning the numeric decimals within the spans:

<div>BusinessA <span style="color:#666666; position:relative; left: 79px;">12.25&#37;</span><br>
BusinessB <span style="color:#666666; position:relative; left: 79px;">11.15%</span><br>
BusinessA B <span style="color:#666666; position:relative; left: 66px;">5.35%</span><br></div>

But when the class C is added, it shifts only the last decimal (IE/FF) which here is 5.35%

<div class="C">BusinessA <span style="color:#666666; position:relative; left: 79px;">12.25%</span><br>
    BusinessB <span style="color:#666666; position:relative; left: 79px;">11.15%</span><br>
        BusinessA B <span style="color:#666666; position:relative; left: 66px;">5.35%</span></div>

I think what I need to ask is how can I do this without relative position and/or a table?

2

Here are some live demos of definition lists and another UL using spans.

In particular these two here might be helpful in regards to what you are doing
2-col-dl
span-list

3

Much appreciated it Rayzur. And thanks for the links, that’s nice to know for future reference.

Post resolved.

4

I think what I need to ask is how can I do this without relative position and/or a table?
Hi,
I agree, you need to find another way to do that. It looks like you were giving the last span in the .c class a smaller offset value to account for the extra character of the “BusinessA B”. That will just leave you frustrated having to set offset values according to characters.

This could just be a simple UL with a floated span. Since floats must come first in the source for IE6/7 I would nest “Business?” in the span.

Then you could use text-align:right on the LI to position the % entries to the right. You could use a non-breaking space to keep them separated if css was off.

This could also be done with a DL (definition list) but some would disagree with that approach.

Here is an example with the floated span -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test Page</title>

<style type="text/css">
.biz {
    width:240px;
    margin:0;
    padding:5px 0;
    overflow:hidden;
    list-style:none;
    border:1px solid #C4C4C4; 
    font:600 12px/1.3 arial,helvetica,sans-serif;
}
.biz li {
    float:left;
    width:220px;
    padding:0 10px;
    text-align:right; /*align % entries to the right*/
    color:#666;
}
.biz li span { /*bring the float 1st in source order*/
    float:left;
    color:#000;
}
</style>
</head>
<body>

<ul class="biz">
    <li><span>Business A</span>&nbsp;12.25%</li>
    <li><span>Business B</span>&nbsp;11.15%</li>
    <li><span>Business CC</span>&nbsp;5.35%</li>
</ul>

</body>
</html>