fix cursor input - css

Question

i have this template http://khine.3b1.org/search.html and on the right hand side i have a search input field.
the problem is that the cursor sits before the background image!
how do i shift it to the right by 25px so that it starts after the search_icon.png image. the '.placeholder-field' does not seem to do anything for me!
<div id="topsearch" class="yui3-u-1-8"><!-- topsearch width: 12.5% placeholder-field -->
<table>
<tr>
<td>
Advanced Search
</td>
<td>
<form action=";browse_content" method="get">
<div class="search placeholder-field">
<input name="search_text" type="text">
<input value="Search" class="button" type="submit">
</div>
</form>
</td>
</tr>
</table>
</div>
here is the css:
/**************************************************************************
* Search
**************************************************************************/
#topsearch {
display: inline-block;
margin: 3px 0 0 0;
}
#topsearch .advanced-search {
display: inline-block;
float:right;
margin:0 3px 0 0;
width: 16px;
height: 16px;
text-indent: -9999px;
background: url('/ui/core/resources/advanced_search_icon.png') 0 0 no-repeat;
opacity: .2;
}
#topsearch .search input {
font-size: 100%;
width: 90%;
padding: 5px 2px;
border: 1px solid #DDD;
border-top-color: #CCC;
border-bottom-color: #EAEAEA;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background: url('/ui/core/resources/search_icon.png') 5px 50% no-repeat white;
}
.placeholder-field {
left: 25px;
}
#topsearch form input.button {
display: none;
}
what am i missing?
is there a way to improve the template so that it is a bit more fluid?
many thanks

Answer 1

Simply reduce the input width and add padding-left on your input like this :
#topsearch .search input {
padding: 5px 2px 5px 25px;
width: 75%;
}

Answer 2

I've fixed it:
#topsearch form input.button{
cursor: pointer;
height: 30px;
position: absolute;
right: 150px;
width: 30px;
display:block
}
You also have to remove the value property of input:
<input type="submit" class="button" value="" style="position: absolute; cursor: pointer; width: 30px; right: 150px; height: 30px;">