bugzi11a Reporter
	Description • 13 years ago

User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:9.0.1) Gecko/20100101 Firefox/9.0.1
Build ID: 20111220165912

Steps to reproduce:

In Firefox 9.0.1, I defined button elements that have a child image element. I defined the size of the button element and the image element, and both have the same size without any margins or padding. There are 4 instances of this in the provided example.


Actual results:

However, the image child element is displayed with an inexplicable vertical and horizontal offset from the parent button element. MSIE 9 does not present the same offset. I examined the elements in question with DOM Inspector but saw no accidental margins or padding to cause the offset.


Expected results:

As in MSIE 9, the image child elements should display only inside the button parent elements in an exact overlay.

	Boris Zbarsky [:bzbarsky]
	Comment 1 • 13 years ago

You're seeing the extra padding on buttons where the focus outline goes.  That can in fact be turned off; see -moz-focus-inner

	bugzi11a Reporter
	Comment 2 • 13 years ago

(In reply to Boris Zbarsky (:bz) from comment #1)
> You're seeing the extra padding on buttons where the focus outline goes. 
> That can in fact be turned off; see -moz-focus-inner
> 
> *** This bug has been marked as a duplicate of bug 140562 ***

Thank you. I tried:

button::-moz-focus-inner
{
  border: none;
  padding: 0px;
}

and that does indeed seem to remove the undesired offset in Firefox, but of course now I don't validate with the W3C Jigsaw CSS Validator. I looked at bug 140562 but saw no other offered solutions that don't use the proprietary pseudo-class ::-moz-focus-inner. Is there anything else that will allow successful validation, since I have stood on my head to achieve 100% validation up to this point?

	Boris Zbarsky [:bzbarsky]
	Comment 3 • 13 years ago

I don't believe there is.  Your fundamental problem is that button rendering is not actually defined in any specification, and as a result different UAs have various ways of making the buttons come out "right" in various scenarios...

	bugzi11a Reporter
	Comment 4 • 13 years ago

Thank you again very much for your assistance. In this case, I resorted to subterfuge via the use of PHP and JavaScript to inject a separate CSS file in the header of my HTML5 document if the User Agent reported itself as being actually Gecko based ("Gecko/"). It works and allows the document to CSS validate, but it it a bastard work around that I deplore.

May I respectfully suggest that rendering any element, but in this case the button element, in ANY rendering engine that adds undocumented borders, padding, or margins is NOT the best approach. There isn't really any documentation offered here either:

https://developer.mozilla.org/en/CSS/CSS_Reference/Mozilla_Extensions

for the ::-moz-focus-inner pseudo-element/pseudo-class.

In general, I much prefer working with the Gecko Engine rather than the Trident Engine, but this is one case that the Gecko Engine leaves a lot to be desired - especially as in bug 140562 Comment 16 "this bug is 8 years old. it’s really time to fix it!". I heartily agree!