Remove the complete styling of an HTML button/submit

Question

I'm styling a submit button in css for all browser its work fine in all browser except ie7 When i click on submit button it moves to the top a little. It makes it look out of shape. I used a specific css for ie.

Here is the code that I used:

.button
{
    width   : 80px;
    background  : none;
    cursor  : pointer;
    font-family : 'voltaeftu-regular',Times New Roman;
    font-size   : 16px;
    color   : #fff;
    border  : none;
    margin      : 0px;
    padding     : 0px;
}

Answer 1

Yes, I'm afraid it's an unavoidable problem with styling buttons that IE (and Opera) will move the content of the button down and to the right by one pixel when clicked.

You've got a bunch of possible approaches here:

1. Use a <button> with a <span> inside it instead of an <input type="button">. Position the button relative and the span absolute at top/left 0, so that the movement of the button content doesn't affect the span. Ugly, and will break in other browsers, so you'd only want this styling to apply for IE-and-maybe-Opera.

2. Use a link styled as a button instead of an actual button, with script applied to its click event. Unlike buttons, you get full control over consistent styling for links. I would advise against this as you're dragging in a load of link behaviours that don't make sense for a button, like middle-click, right-click-bookmark, drag-and-drop etc. Lots of people do use links to do button tasks but IMO it's highly undesirable. (Especially when they use javascript: links... ghastly.)

3. Use an inactive element such as a <span> instead of an actual button, with script applied to its click event. Again, you get full styling control. This is what SO uses for actions like ‘add comment’. The trouble is that you break keyboard navigation; you can't use tab, space etc. to navigate and activate the controls. You can enable keyboard navigation in most browsers by giving the element a tabindex attribute, but putting tabindex on an inactive element is invalid HTML. You can alternatively write it from script, and also add script to allow space or return to activate the faux-button. But you'll never quite reproduce browser form field behaviour perfectly.

4. Replace the whole thing with an <input type="image">. Naturally you get pixel-perfect control over the image! But trying to match rendering styles, and generating a new image for each button, is usually too much of a pain in the neck.

Options 2 and 3 also have the problem that they introduce a JavaScript dependency, so your form will break when JS is unavailable. You can mitigate that by using a normal <button> in the markup and replacing it with other controls from script, or if you're creating them from script anyway no problem. But in the end, my usual conclusion is that this is all far too much effort and too fragile a result, and that the best thing is to plump for option 0:

• Live with it. It's usually not that bad a thing that button content moves a little bit when you click it.