Paragraph one is right here.

Paragraph two is here, complete with a
break onto a new line.

Paragraph three is here, which has
not one line breaks,
but two.

Floaty JavaScript Browser Bugs

Using ppk's Find position JavaScript demo I uncovered a range of what appear to be bugs in various browsers. (See the Notes below.) Firstly, test this demo by hovering over the test paragraphs above to move the test layer. It should move to the start of each paragraph.

Notes

Internet Explorer 6 & 7

• IE places the test layer starting almost at the end of the first paragraph. Other browsers can also indent unfloated blocks to there for some reason. (Examples removed.)
• IE also makes secondary list items here really narrow. And it loses the bullet points too!

Firefox 2

• Firefox ignores the line breaks in the floated test paragraphs above. Yet it adds space to allow for the extra lines. It is floating the <br /> elements! (Unfloating them leaves a curious gap at the top of the second two test paragraphs.)

Opera 9

• Opera leaves the end of the test layer behind when it first moves upon hover. The letter 'r' and part of the letter 'e' remain at the top.
• Opera sometimes changes the length of the lines in this section as you hover over the different test paragraphs above. (To fix it, apply a border.)
• Narrowing the browser window sometimes stops the text reformatting to fit the screen, resulting in a vertical scrollbar. Other times, the text carries on reformatting as you reduce the window. It seems to be triggered initially when the text overflows at the bottom, resulting in a horizontal scrollbar. But it can also occur at narrower widths too.

Details

Coded by Chris Hester 17 November 2006 · Last updated 16 March 2008