Is there a CSS absolute positioning rendering bug in FF1.02 and IE 6?

I have been experimenting with precision absolute positioning in CSS.

The following test content was used in the experiment:
"This sentence is to be about nine words long. I hope this test suite works. Mary had a little lamb and its fleece was white as snow."

Next a macro was used to divide the content into equal sentence fragment spans of the 12 characters each and placed in a html page linked to an external stylesheet called frag1.css. This yielded the following results:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<TITLE>sentence frag tester</TITLE>
<link rel="STYLESHEET" type="text/css" href="frag1.css" />
</head>
<p>
<span class="pf1">This sentenc</span>
<span class="pf2">e is to be a</span>
<span class="pf3">bout nine wo</span>
<span class="pf4">rds long. I </span>
<span class="pf5">hope this te</span>
<span class="pf6">st suite wor</span>
<span class="pf7">ks. Mary had</span>
<span class="pf8"> a little la</span>
<span class="pf9">mb and its f</span>
<span class="pf10">leece was wh</span>
<span class="pf11">ite as snow.</span>
</p>
</html>
Notice that some of the spans divide a word and some spans contain a leading space like the span class "pf8".

Next the style sheet "frag1.css" contained the following :
Code:
*{font-family: courier; font-size: 1em;}
p{position: relative;}
.pf1{position: absolute; top: 0em; left: 0em; background-color: yellow; }
.pf2{position: absolute; top: 0em; left: 7.5em; background-color: orange;}
.pf3{position: absolute; top: 0em; left: 15em; background-color: yellow;}
.pf4{position: absolute; top: 0em; left: 22.5em; background-color: orange;}
.pf5{position: absolute; top: 1em; left: 0em;  background-color: yellow;}
.pf6{position: absolute; top: 1em; left: 7.5em;  background-color: orange;}
.pf7{position: absolute; top: 1em; left: 15em;  background-color: yellow;}
.pf8{position: absolute; top: 1em; left: 22.5em;  background-color: orange;}
.pf9{position: absolute; top: 2em; left: 0em;  background-color: yellow;}
.pf10{position: absolute; top: 2em; left: 7.5em;  background-color: orange;}
.pf11{position: absolute; top: 2em; left: 15em;  background-color: yellow;}
The problem I am having is that when a span begins with a space, as is the case with class .pf8 from the html code, it is ignored and compressed directly into the preceding span. For example the following:
<span class="pf7">ks. Mary had</span>
<span class="pf8"> a little la</span>

should display in FF as "ks. Mary had a little la" with a space between "had" and "a" since a space precedes the word "a" in span class "pf8". Instead this is what is displayed in my browser: "ks. Mary hada little la" where the word "had" and "a" are compacted into "hada" . The space that precedes "a" is completely ignored even though it appears in the pf8 span in the html code.

Is this a bug? I am I doing something wrong? How can I make it work so that leading spaces appearing inside a span are not ignored?