Cause of offset/margin in FF

Question

trying to have some sort of gradiented border by having a parent element have the gradient border and then the child element have the regular background.

This seems to screw up in FF but works in Chrome... is there any reason as to why FF adds some sort of extra padding/margin/offset that doesn't make it entirely 1px padding?

http://jsfiddle.net/32zbD/1/

It's really annoying cause you're looking at it in Firebug but the extra part isn't shown where it comes from at all. It's just 'there'.

I've tried using CSS reset stylesheets in there as well to try and make the differences minor but its still there!

Got a feeling that its caused by the doctype as on an HTML5 doctype I've got it working in FF7 and Chrome. Can't change the doctype in JSFiddle so can't really test and share it like that.

Answer 1

Firefox has some internal padding on buttons where it puts the focus outline.

You probably want to style button::-moz-focus-inner to have no border or padding.

That said, for the particular case of buttons styling differs in various other ways by OS and browser, so this stuff is not really guaranteed to work...