repeating image background on input text field

I have a search bar that uses a background image that's 200 by 25 px that uses the following css class

.searchBar{
    border-style: hidden;
    border-width: 0px;
    color: #FFFFFF;
    padding-left: 10px;
    padding-right: 10px;
    font-size:1em;
    background-image: url(images/searchBox2.gif);
    font-family: "calibri", "helvetica", sans-serif;
    margin-left:1%;
    width: 200px;
    height: 25px;
    outline: 0 none;
    vertical-align: middle;
    }

For some reason, it extends the element to a 220 by 27 field (the 10 padding on the left and right side and another 1 px from the top and bottom in another class) and the background image is repeated. It worked the way I wanted it before with the background not repeated until I recently added doctype html 4.01 transitional into my code. Here's a lin开发者_StackOverflow社区k to a visual of what I mean: Picture of Search Bar before and after

---

Padding adds up to total width of the element. See the example to know how to get same result.

Without padding

.searchbar {
    width: 200px;
}

With padding

.searchbar {
    width: 180px;
    padding: 0 10px; 
}

And to avoid the repeating background use background-repeat:no-repeat;

Here is your full solution

.searchBar{
    border-style: hidden;
    border-width: 0px;
    color: #FFFFFF;
    padding-left: 10px;
    padding-right: 10px;
    font-size:1em;
    background-image: url(images/searchBox2.gif);
    background-repeat: no-repeat;
    font-family: "calibri", "helvetica", sans-serif;
    margin-left:1%;
    width: 180px;
    height: 25px;
    outline: 0 none;
    vertical-align: middle;
    }

You can also use shorthand background to merge your background styles

background: url(images/searchBox2.gif) no-repeat;

You can also use shorthand padding to merge you padding-left and right

padding: 0 10px;