Another nutty firefox problem

[xoggoth]

Here's a little bit of test jscript with two P elements with position:absolute:-

document.getElementById("p0").style.top="30px";
document.getElementById("mark").style.top=document .getElementById("p0").style.top;

As you would expect they line up vertically. If you now change one of them to DIV there is no change in IE but in Firefox they are no longer aligned. In Firefox it seems that the Ps were not correctly placed in the first place, it is not the physical top of the box that was at 30px but the bottom of the text inside it.

Any solutions to force it into sensible behaviour apart for using something other than P? Cheers.

[ghl]

Also freaks on Google Chrome...

Try adding margin: 0; to the styles of the elements in question.

[Bunk]

Yep, it's the default margin that Firefox applies to p tags. Most people use a reset stylesheet to remove all default browser styles. Then you can start with a clean slate.

[xoggoth]

Yeh! Put margin:0 padding:0 in style and it works now . Cheers ghl/Bunk.

PS Well almost, the border width is obviously handled slightly differently in the browsers too.

[Bunk]

Have a look at Yahoo's reset stylesheet to avoid other problems like this. They also have a base stylesheet that re-applies some base styles to elements but does it consistently across browsers.

[bogeyman]

Invariably in these situations it's IE that get's it wrong - even when you might think IE is right, or more logical.

I always test page layouts in FF and Safari first, because (99%) they get CSS right.

Once it works in FF and Safari, I test in IE and use conditional stylesheets to work around IE's brokenness.

Oh and yes, a complete CSS reset is the best starting point to get rid of silly browser defaults.

[xoggoth]

Cheers for further comments. Will have a look at those.