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 a external stylesheet called frag1.css. This yielded the
following results:
<!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 :
*{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?
