|
Posted by Ben C on February 9, 2008, 6:25 pm
Please log in for more thread options
>> > That is not OP's question.
>>
>> I think it is. OP's source looked something like this:
>>
>> <li>foo</li>
>> <li>bar</li>
>>
>> In what you see above, in the source, there is the string '\n '
>> between the two list items. According to the white-space collapsing
>> rules (assuming white-space: normal) that all collapses down to one
>> space.
>
> All I see in OP is HTML source alined to the left border, no left
> indent, no spaces after line break. So was my sample explaining the
> problem.
It doesn't matter. Any string of whitespace of any kind (newline, space,
tab)+ all gets collapsed to a single space.
>> > OP's question is answered at
>> >http://developer.mozilla.org/en/docs/Talk:Whitespace_in_the_DOM
>> > and I already posted this link.
>>
>> OP wasn't asking about the DOM.
>
> OP asked: "I can fix the problem using float:left in the LI elements
> but I need to understand why is Mozilla drawing it whith that gap."
>
> The gap appears because Gecko creates phantom nodes in place of pretty-
> print line breaks.
No it doesn't. The "phantom node" issue is something completely
different.
The gap is just a space, the result of collapsing a newline and maybe
some other spaces.
> These are DOM phntom nodes, so a DOM question,
> aswered in linked resources. It is not problem of styling (floating,
> not floating etc.) at all. Extra styling or special pretty-print
> formatting are just workarounds for the said DOM problem.
The DOM issue arises when you use, for example childNodes on the <ul>.
<ul>
<li>foo</li>
<li>bar</li>
</ul>
Now if you did document.getElementsByTagName("ul")[0].childNodes, you'd
find it had I think 5 children:
1. #text
2. the first list-item
3. #text
4. the second list-item
5. #text
The three #text nodes are supposed to be there but they are what are
described as the "phantom nodes" in that Mozilla non-bug you alluded to.
OP is not looking at the DOM with JS. The presence or not of the
"phantom nodes" is therefore irrelevant.
Consider this:
<span>foo </span><span>bar</span>
<span>foo</span> <span>bar</span>
Both display the same as "foo bar". But the DOM trees look different. In
the first case the two span nodes are siblings, in the second they are
separated by a (so-called "phantom") #text node.
>> > Now let me repeat my question:
>> > Do you agree that HTML source like
>> ><ul>
>> ><li id="Item1">Item 1</li>
>> ><li id="Item2">Item 2</li>
>> ></ul>
>> > has to display an element 45px width and 21px height between the two
>> > LI elements?
>>
>> Of course not. But I'm not sure I follow you. Where do you get this 45px
>> width and 21px element from?
>
> From the obvious visual observation reported by OP, shown in my sample
> and measured by Javascript/DOM methods in my sample. Did you run the
> demo I have posted on say Firefox? Do you understand Javascript enough
> to understand what does it measure? If not then I can comment on it.
I didn't run your example. Perhaps I will go back and take a look at it
though since it might help to explain what you're talking about.
> You confusion - I guess - is that you are using "whitespace" term in
> some super-generic W3C way which is so generic that has no practical
> sense. Try to forget about "whitespace" and try to think about "new
> line" and "space".
Newline and space are both whitespace characters, in common usage, which
has nothing to do with the W3C.
I use whitespace in this context to mean space, carriage return and tab.
> Given style rule like:
>
> p {
> font-family: monospace;
> font-size: 2em;
> }
>
> And HTML element like:
><p>Lorem ipsum</p>
>
> Is it obvious to expect to see 2em space between Lorem and ipsum? I
> would say of course, and no one is arguing with it.
>
>
> Now having HTML element like:
>
><p>Lorem
> ipsum</p>
>
> (<p>Lorem followed by new line and nothing else)
> Would it be obvious to expect that this form of source code will
> produce exactly the same visual result in some browsers as the first
> one (with the space)?
Yes. The newline "collapses" to a single space. The two examples should
display exactly the same (assuming white-space is set to normal or
nowrap).
| 
XML Sitemap