Hi,

Trying to figure out how to prevent the text in my submit button from pushing over a little on click. It only happens during the active state (when the mouse button is being held down over the element).

This only happens in Firefox, and I've seen it before when the button is styled custom, but I have an eagle-eyed client who's hoping we can find and fix the issue.

The HTML is pretty simple.

<input type="submit" id="formNotifySubmit" value="Notify Me" />

The CSS is slightly more in depth, but nothing out of the ordinary.

#formNotifySubmit {
background: url(../images/sprite.png) -140px -96px no-repeat;
border: none;
color: #35383c;
cursor: pointer;
font-size: 1.3em;
height: 27px;
text-shadow: 0 1px 1px #e5e5e5;
width: 92px;

}

Anyone encountered this before? Thanks in advance.

Marcus

3 answers

0
points

This fixed it for me:

input[type="submit"]:active {
    padding: 0;
}

The reason is because Firefox has a built-in stylesheet which applies some padding to active buttons. You can view these "hidden" styles using the Firebug extension: go to the "HTML" tab, and under the Style menu, select "Show User Agent CSS". Click your submit button and a rule like this will appear:

button:active:hover, input[type="reset"]:active:hover, input[type="button"]:active:hover, input[type="submit"]:active:hover {
  background-color: buttonface;
  border-style: inset;
  color: buttontext;
  padding: 0 5px 0 7px;
}

This irritating rule is what we're overriding.

Answered over 2 years ago by BradleyStrider
0
points

Something quick to try, haven't tested it on your page, but I'm wondering if the default dotted line that Firefox wraps around links and submit buttons is causing the push? Maybe try:

button::-moz-focus-inner { border: 0; }
Answered about 4 years ago by Andy Johnson
  • Hey yeah I found this on Google before I asked and gave it a shot but no dice. Thanks for trying. Marcus Hodges about 4 years ago
0
points

Have you tried explaining to the client that the default action of the button is better served to assist the users; giving them the subconscious acknowledgment of successfully performing an action on the site?

Otherwise, instead of hacking the button with some jQuery, you're probably better off using an input type="image" or a div/span with an onclick command.

Answered about 4 years ago by Vinny Burgh