Remove outline from button in firefox

Question

I have a button that holds an image. It looks fine in chrome, and even in IE. But in firefox it leaves an ugly thick border around the button. I have tried border:none; in CSS but nothing seems to change.

My button code is:

<button id="next3"><img src="<?php echo $this->getSkinUrl('images/proddown.jpg') ?>"</button>

I currently have no styles attached. Any ideas how to fix this? Thank you!

Answer 1

In your case, you need to add background:transparent to the button element. Adding this, along side border:none should solve the problem, if not, see this question.

Example Here

button {
    background:transparent;
    border:none;
    outline:none;
}