Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions

How to remove padding on a submit button?

Posted on 2008-06-20
Last Modified: 2008-06-28
I'm trying to make a submit button, with an image as background-image, which works perfectly in firefox but in IE6 and 7 there is some padding I can't seem to get rid of.

My HTML code:
<input type="submit" value="" id="submit">

My CSS code:

Any ideas how to get rid of the padding? IE versions and forms/inputs are always so annoying.
Question by:bt33
  • 3
LVL 28

Expert Comment

ID: 21830663
I usually do it with an inline css

<input type="submit" value="" id="submit" style="padding: 0px; margin: 0px;">

Author Comment

ID: 21830747
inline css? display:inline;? doesn't seem to work for me.

Author Comment

ID: 21830774
Now I think of it, the background-image doesn't start at the topleft, I assumed it was padding but maybe the background-image isn't set correctly somehow.

Accepted Solution

bt33 earned 0 total points
ID: 21831094
Got it working, not completely sure how but here is the code I use now:

<input type="submit" value="" style="padding:0; margin:0; position:absolute; top:0; left:193px; background-image:url(srchbtn.gif); border:0px; height:29px; width:105px;">

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
How to format numbers and letters in nested lists 5 32
SSRS 2016 Rendering HTML tables 3 29
HTML Anchor Link Problem 3 36
CSS Style 8 20
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

829 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question