Issue with firefox and inline document.write

[Rahul G]

I am trying the following code in FireFox 3.6
-- code --
<script type="text/javascript">
document.write( '<a href="javascrip t:t()" >');
</script>
<div id="rt2"> Click2 </div>
</a>

--- FireFOx DOM --

<a href="javascrip t:t()"></a>
<div id="rt2">
<a href="javascrip t:t()"> Click2 </a>
</div>

----- END ---
This seem to be completely messed up. All other browsers (IE 8, Safari ) are rendering it properly.

---- OTHER Browsers --
<a href="javascrip t:t()">
<div id="rt2"> Click2 </div>
</a>
--- END ----

Appreciate any insight.

[johny10151981]

It work fine with firefox 3.6.8 and IE8.

What is your actual problem?

[Rahul G]

You can click the link but the issue is with the actual DOM elements. Please install Firebug and click on the HTML tab. Observe how the <a> and <div> tags are inside out. You may have to use DOM inspector on IE to see the same.

[kovik]

Basically, your anchor tag is still open. By HTML standards, block elements cannot be rendered within inline elements. So, browsers can either forcefully end your anchor tag, or, like Firefox does, continue into the block element.

Basically, use proper markup if you want consistency. There are no standards for broken HTML, so there's no such thing as rendering your broken HTML "properly."

[Rahul G]

I can understand FF closing the anchor tag. But with FF I end up with two anchor tags, one inside and one outside the div.

<a href="javascrip t:t()"></a> <-- 1
<div id="rt2">
<a href="javascrip t:t()"> Click2 </a> <--- 2
</div>

[kovik]

I don't think you are following.

The <div> element CANNOT be inside of the <a> element. Firefox will have <a> tags around EVERYTHING that comes after that element to mimic your broken HTML. The source that you are viewing is not the ACTUAL source of the website. It is the source that Firefox generates from your source.

The reasons browsers have to generate their own source which can differ from the actual code is because they can't simply deny pages with malformed HTML. They have to serve those pages, somehow.


Now fix the damned tag. :P

[Rahul G]

Thank you for the response. That was just a simplified piece of code extract from an enterprise app. The source am referring to is the generated source by firefox (using the DOM viewer in firebug).

I do have a follow upp question.

Why Firefox render
<a href="javascrip t:t()"><div> Click </div> </a> properly but not the inline script version ? In this case the inline element <a> is not fragmented or duplicated. I understood that both are broken HTML but the rendering (DOM) is different.

[kovik]

Attempting to explain why browsers handle malformed HTML differently is pointless. Like I said, there's no standard and they can handle it however they want. If you are really curious, take it up with Mozilla. :P

[Rahul G]

Actually I did post the question. For the work am doing, understanding the html parser is necessary. Unfortunately the parser for the same browser itself is behaving differently. I will update if I hear anything back from Mozilla.