Why does fieldset padding causes childs absolute position to misrender in FF?

Question

Not sure whats going on here or where I've gone wrong but FF3.6 doesn't render the green button in the link below correctly compared to Chrome 9. IE8, Opera 11 or Safari 5.

All others put the button in the bottom right corner of the parent, 12px out. FF3.6 puts it 24px up and against the right side:

http://jsfiddle.net/sxkWZ/2/

Anyone aware of this issue or have I missed something obvious?

Update: Confirmed the issue in FF4 Beta 11. Thinking about filing with Mozilla.

Thanks, Denis

Answer 1

After fiddling some more, it appears as though the bug is only applying to the fieldset when teh container element has padding set to it. I removed the padding (and instead added a margin to the p element) which solved the issue of the button being pushed up:

Take a look here: http://jsfiddle.net/sxkWZ/11/

If you just want the button to appear bottom right the alternative is to float it: jsfiddle.net/sxkWZ/10

Regards, Simon

Answer 2

Definitely looks like a Gecko bug as changing fieldset to div makes it render properly:

http://jsfiddle.net/sxkWZ/6/

You can probably just use an enclosing element like a div and switch the position:relative to it to workaround this issue.