Firefox rendering gone WRONG - see something really weird

Question

I have the following is really weird. Bassically when I view the source of the page everything looks fine but the page looks all wrong. So I decided to take a look at the source using firebug and firebug shows a very different story. But if I refresh the page the page looks fine and the source and firebug match up. See below for what the source is but what firefox displays and firebug shows: View source shows this: ```

Little Rock

Accepted Answer

Like others said, this happens because your markup is invalid. Going a bit deeper, the problem is that when the parser received `

` in its input, it may mean two things: - You forgot to close the anchor tag, in which case this should become `

...` in the DOM, or - The anchor wraps the div, in which case the DOM should be `

`. The correct decision can be made only when more (potentially much more) characters are known; the parsing, as you could have noticed, happens incrementally -- i.e. you can see parts of the page before it's fully downloaded. Unfortunately, the Mozilla's HTML parser (as of Firefox 3.6 and earlier) is non-deterministic in this case -- the resulting DOM depends on the portions your HTML is split into, while going over network. There's a Mozilla bug about a problem that looks very similar to yours. I'm sorry for you, and I don't know how to implement (nor have any desire to try implementing ;) the solution to your original problem, but perhaps a hack involving setting `innerHTML` (to avoid parser non-determinism) is in order? BTW, it would be interesting to check how the HTML5 parsing algorithm says your markup should be treated, since that's what will eventually be implemented in the browsers.

Firefox rendering gone WRONG - see something really weird

Solution

Problem