By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
429,190 Members | 2,204 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 429,190 IT Pros & Developers. It's quick & easy.

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

P: n/a
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?

Jun 28 '06 #1
Share this Question
Share on Google+
3 Replies


P: n/a
Els
ho*******@yahoo.com wrote:
How can I make it work so that leading spaces appearing inside a span are not ignored?


Use &nbsp; instead of just a space.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/
Jun 28 '06 #2

P: n/a

"Els" <el*********@tiscali.nlwrote in message
news:zu*****************************@40tude.net...
ho*******@yahoo.com wrote:
Use &nbsp; instead of just a space.
Simpler:

span { white-space: pre }

Dave
Jul 6 '06 #3

P: n/a
Els
Dave wrote:
"Els" <el*********@tiscali.nlwrote in message
news:zu*****************************@40tude.net...
>ho*******@yahoo.com wrote:
Use &nbsp; instead of just a space.

Simpler:

span { white-space: pre }
Doesn't work in IE.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/
Jul 6 '06 #4

This discussion thread is closed

Replies have been disabled for this discussion.