fix cursor input

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>
        <a href="/;advanced_search" class="advanced-search" title="Advanced Search">Advanced Search</a>
      </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;">