CSS Forum

**wayfarer07** · 04-02-2008, 06:09 PM

I am currently building a website for a moving supplies company. There is one little annoying thing (in IE of course) that has been frustrating me. I have created these custom input buttons on all of his forms, as he requested.

The only problem is there is a little extra padding on each side of the button in Explorer. It wouldn't be a big deal, but it is messing with the layout in a few places, as this button is used thoughout the site. He requested I make it match Firefox.

Here is a stripped down, bare bones example of the html/css:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example</title>
<style>
input.button {
    color: white;
    font-size: 12px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    background-color: #b47023;
    text-align: center;
    padding: 3px;
    *padding-left: 0px; /*trying to cut down on width in IE browsers*/
    *padding-right: 0px;
    border: solid 2px black;
    cursor: pointer;
}
</style>
</head>

<body>
<form>
<input class="button" type="submit" name="Add to Cart" value="ADD TO CART" />
</form>
</body>
</html>

Does anyone know a solution to this?

**vectorialpx** · 04-02-2008, 06:58 PM

I don't know if it's a solution:

<input type="button" ... id="my_but1" />

#my_but1 {
margin:0; padding:0; width:120px; /*see the right dim*/ text-align:center;
}

**wayfarer07** · 04-02-2008, 07:05 PM

Setting an exact width does seem to make it consistent, but for some reason I rejected this earlier because even fonts set in px can be scaled in Firefox by holding the 'ctrl' button and scrolling the mouse wheel, which would cause the text to spill over the border and be hidden. I guess I'll just make the font scalable and set the width in em, for consistency(sort of) with Explorer.

**wayfarer07** · 04-02-2008, 07:14 PM

Ok, that fixed it. Thank vectorialpx.