-moz-focus-inner

Question

In another question I asked about alignment this was given to me to answer the question about firefox being a twit. It worked but it has left a sour taste in my mouth and I'll explain why.

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

Opera (10 for this example), Firefox (3 for this example) and Internet explorer (7 for this example) all display an input[type="submit"] button differently. This "focus-inner" property is default 0 on Opera 10, something like 5px for firefox and must be 6px for Internet explorer.

How can I "blanket" reset them all to 0? Is there an standard CSS call that will not only do the above but will set this hidden property for IE too?

many thanks in advance.

Answer 1

The reason why this is happening is simple: because all these browsers are made by different people. Try looking at your buttons from Safari, for example. There is no such thing as one css rule that will force all buttons in all major browsers look the same.

Well, actually you can achieve pixel-perfection, if you treat every one of them personally, like this. And you can always use <input type="image">, that will do the trick for sure.