Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

How to remove padding on a submit button?

Posted on 2008-06-20
4
Medium Priority
?
3,132 Views
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:
height:29px;
width:105px;
padding:0;
margin:0;
border:1px;
background-image:url(srchbtn.gif);

Any ideas how to get rid of the padding? IE versions and forms/inputs are always so annoying.
0
Comment
Question by:bt33
[X]
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
  • 3
4 Comments
 
LVL 28

Expert Comment

by:gamebits
ID: 21830663
I usually do it with an inline css

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

Author Comment

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

Author Comment

by:bt33
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.
0
 

Accepted Solution

by:
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;">
0

Featured Post

WordPress Tutorial 3: Plugins, Themes, and Widgets

The three most common changes you will make to your website involve the look (themes), the functionality (plugins), and modular elements (widgets).

In this article we will briefly define each again, and give you directions on how to install them.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
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.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

730 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