Firefox diplaying line breaks between image maps, But it's fine on IE, Chrome and Safari Options

[cecylia]

Hello

I recently made a very quick website at http://cecylia.com.au using a WYSIWYG editor. The index.htm page contains three image maps which are supposed to appear horizontally next to each other. The image maps also have a javascript rollover image to reveal the text to which the maps relate.

On IE8, Chrome and Safari (on iPhone) the three images appear horizontally, but on FF3.6 they appear vertically.

When making random changes to try to figure out the problem, I found that moving the <map> tags out of the paragraph made FF display it "correctly" but that broke the rollover image. which would revert back to the original image whenever you hovered over a mapped area.

I can't think why FF would be breaking the line just because of the <map> tags. Any ideas?

Thanks!

[pandy]

FF seems to treat the MAP elements as block level and thus the line breaks after each one. MAP can be both block and inline depending on the context, but since you have your maps in a P, I think they should definitely be inline. Either I'm missing something or FF gets it wrong.

Anyway, an image map doesn't need to be close to the image it's for, so you can move the MAPs somewhere else, for example last in the document. Hopefully they won't cause a gap or anything there.