the image within an image in my search is not lining up

Here is my link and if you look at my search box on top you will see the design is a bit off.

here is my html

<form action="/contacts" class="myform" method="get">
    <div style="margin:0;padding:0;display:inline">
    <input name="utf8" type="hidden" value="&#x2713;" /></div>
    <fieldset style="border:none; padding-top:12px;">
    <ul><li>
    <input id="search_area" name="search" type="text" value="matt" />
    <span class="submit_form"></span>
    </li>
    </ul>
    </fieldset>      
</form>

here is some of my CSS

#search_bar {
    width: 265px;
}
#search_area {
    background-color:transparent;
    border:medium none;
    color:#000;
    font-size:15px;
    margin-left:10px;
    margin-top:7px;
}
.myform {
    margin: 0px;
    padding: 0px;
}

.submit_form{
    background-image: url(images/search_bar_mag.png);
    height: 35px;
    width: 38px;
    display: inline-block;
    position:relative;
    top:2px;
}
.sub开发者_JAVA技巧mit_form:hover{
    background-image: url(images/search_bar_mag.png);
    background-position:bottom center;
}
.myform ul {
    margin: 0px;
    padding: 0px;
    display: block;
}
.myform li {
    background-image: url(images/search_bar_bg.png);
    height: 35px;
    width: 263px;
    display: block;
    font-size: 20px;
}
.myform li:hover {
    background-image: url(images/search_bar_bg.png);
    background-position:center -35px;
}

basically i need the image on the right to be the submit to the form....any ideas why the style is off

Found the error.

Your is sharing a line with the that comes after it. The height of the span is 35px, while the height of the input is only 18. They are vertical aligned so that the input lower than it should be. Remove the height attribute from the css rule .submit_form, and see the change.

To fix the issue, add this style code:

span.submit_form {
  background-position: 0 -6px;
  height:20px !important;
}

first add this to the #search_area rule then the search text will appear in the box

position: relative;
top: -10px;

I'd be tempted to make the search icon a form image element as follows and float it left next to the search text unless you're submitting the search with jquery or js.

<input id="search_area" name="search" type="text" value="matt" />
<input class="search-icon" type="image" name="some-name" src="images/search_bar_mag.png" />

add this rule to the css

.search-icon {
    float: left;
}