SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    May 2005
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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?

  2. #2
    SitePoint Wizard drhowarddrfine's Avatar
    Join Date
    Aug 2005
    Posts
    3,438
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    &nbsp; non-breaking space. Yes, you are correct. Leading spaces are ignored. This is not a bug.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •