Issue in FF: document.write a DIV (block level element) inside aLABEL tag

[SuneR]

Hi,

I am having problems figuring out how to make Firefox behave, and
output the HTML I want it to output.

The thing I want done is actually quite simple. I have a <label> tag,
and inside it, I have a script tag, that document.write's some HTML.

Like this:

<label>
<script type="text/javascript">
document.write("<div>Test<\/div>");
</script>
</label>

In Internet Explorer, the result is this:

<label>
<script type="text/javascript">
document.write("<div>Test<\/div>");
</script>
<div>Test</div>
</label>

But in Firefox it is

<label>
<script type="text/javascript">
document.write("<div>Test<\/div>");
</script>
</label>
<div>Test</div>

In other words, the <div> is added AFTER the closing </label> tag.

If I change the script to make a document.write("<span>Test<\/span>");
the output is ok in Firefox.

It seems that if you try to document.write a block level element
inside an inline element, Firefox moves it outside the inline element.

I have a stylesheet that makes the outputtet div inline, but Firefox
moves it no matter what.

I am sure this is behaviour as intented from Firefox, since this
happens in both FF2 and FF3, but what can I do to make it work?

Im thinking some sort of code to automatically append the <div> to the
parent element. My problem here is, that I never really know what type
of parent element it is. And I cant just append it at the end because
my output might be in the middle of the parents innerHTML.

Any ideas? Tips? Thoughts?

 

[pr]

It seems that if you try to document.write a block level element
inside an inline element, Firefox moves it outside the inline element.

Very sensibly; a div inside a label would be invalid HTML. See <URL:
http://www.w3.org/TR/html401/interact/forms.html#edef-LABEL>.

I have a stylesheet that makes the outputtet div inline, but Firefox
moves it no matter what.

The stylesheet makes no difference to whether your markup is valid. A
browser may cope with invalid markup in whatever way it sees fit.

I am sure this is behaviour as intented from Firefox, since this
happens in both FF2 and FF3, but what can I do to make it work?

Define 'work'. If you want arbitrary elements inside other arbitrary
elements, use XML. If you want a web browser to display HTML then you
must use (real) HTML.

 

[Richard Cornford]

Very sensibly; a div inside a label would be invalid HTML. See


The stylesheet makes no difference to whether your markup is
valid.

True, but if the intent is to have the effect of a block element inside
an inline element then the stylesheet can act the other way around, and
display:block; an inline element (such as a SPAN). And if there is a
desire to have an inline element then there was no reason for using a
DIV in the first place.

A browser may cope with invalid markup in whatever way it
sees fit.

<snip>

And each and every browsers may handle such mark-up in its own unique
way, as any specification for the standardised handling of invalid
mark-up would make no sense.

Richard.

 

[SuneR]

You are of course completely right, it makes perfect sense when you
put it that way . When I had the issue, I focused more on the
"error" than on what is in fact the more correct way to handle the
markup.

Thanks for clearing it up for me.

 

[dhtml]

<snip>

And each and every browsers may handle such mark-up in its own unique
way, as any specification for the standardised handling of invalid
mark-up would make no sense.

Tell that to Ian Hickson.

HTML 5 defines not only quirks mode, but defines 3 modes:
http://www.whatwg.org/specs/web-apps/current-work/multipage/dom.html#no-quirks

Garrett

 

[Thomas 'PointedEars' Lahn]

True, but if the intent is to have the effect of a block element inside
an inline element then the stylesheet can act the other way around, and
display:block; an inline element (such as a SPAN). And if there is a
desire to have an inline element then there was no reason for using a
DIV in the first place.

JFTR: A block-level element cannot be within an inline-level element. If it
is per markup, it is not Valid; if it is per CSS, the result is usually
design nonsense.

The only thing that could make sense is nesting one element that is
inline-level per default into one that is also inline-level per default
(which is usually allowed), and format the former element display:block
with CSS to hide it by default and show it on event. For example,
accessible tooltips (which will be featured by the next release of the
ECMAScript Support Matrix) can be created this way.


PointedEars