title: CSS: Input fields with submit buttons styling
body: <p>I am currently working with an input field that will do search for my page. But I am undergoing some css styling issues. I have placed inside the input field the submit button which is an image of a magnifying glass. the problem is that the button does not stay in its place through cross browsers. It looks ok in firefox but others browsers it looks bad.</p>
  
  <p>How can i get the submit button to stay inside the input field at all times? <a href="http://webprolearner2346.zxq.net/css-test2/" rel="nofollow">EXAMPLE</a></p>
  
  <p>thank you!</p>
  
  <p><strong>CSS related to object</strong></p>
  
  <pre><code>&lt;style&gt;
  .search-input {
      padding: 0 5px 0 22px;
      border: 2px solid #DADADA;
      height: 30px;
      font-size: 12px;
      line-height: 30px;
      border-radius: 25px;
      -moz-border-radius: 25px;
      -webkit-border-radius: 25px;
  
      background: #FFF; /* old browsers */
  
  }
  
  .search-input li {
  list-style: none outside none;
  }
  
  
  .search-submit {
      width: 13px;
      height: 13px;
      border: none;
      background: url(http://webprolearner2346.zxq.net/css-test2/images/mag-glass.png) no-repeat;
      display: block;
      position: absolute;
       right: 170px;
      text-indent: -9999em;
      top: 60px;
  }
  
  .search{
      float: right;
      margin-right: 30px;
      margin-top: 35px;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="header"&gt;
  &lt;div class="search"&gt;&lt;input type="text" class="search-input" name="search" value="Search"/&gt;&lt;input type="submit" class="search-submit" /&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>