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:
Notice that some of the spans divide a word and some spans contain a leading space like the span class "pf8".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>
Next the style sheet "frag1.css" contained the following :
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: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;}
<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?
Bookmarks