repeating image background on input text field - html

Question

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 link to a visual of what I mean:
Picture of Search Bar before and after

Answer 1

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;