Using CSS3 I am trying to display search box with glass image. I am doing it basically by placing a image on text box and setting its `left-margin`. My code is here:

```
<body>
    <form id="header-search">
        <input type="text" class="searchbox" /><input type="submit" class="button" value="" />
    </form>
</body>

#header-search{overflow:auto;}

#header-search input.searchbox 
{
    border-bottom-left-radius:5px;
    -webkit-border-bottom-left-radius:5px; 
    -moz-border-bottom-left-radius:5px;

    border-top-left-radius:5px;  
    -webkit-top-left-radius:5px; 
    -moz-left-radius:5px;

     border:1px solid #8e8e8e;

     background-color:white;
     height:16px;
     padding:4px;
     padding-left:28px;
     padding-right:10px;
     color:#4a4a4a;
     float:left;

 }

#header-search input.button{
    border:0px dashed red;
    padding:0;
    margin:0 0 0 -185px;
    width:24px;
    height:24px;
    background:transparent url(../images/SearchImage.png) center center  no-repeat;
    float:left;
}

```

**UPDATE**

1. I am not using em rather px
2. I have tried different css reset.
3. please see image for details difference.
4. I have done this code in new css/ html file where there is no other line of code.
![enter image description here](https://i.stack.imgur.com/RIk5q.jpg)