style.css

#header {
	background-color: #999999;
	height: 200px;
}

#login {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	height: 50px;	
	background-color: #FFFF00;
	background-image: none;
}

#searchwrapper {
width:310px; /*follow your image's size*/
height:40px;/*follow your image's size*/
background-image:url(Images/search_box.jpg);
background-repeat:no-repeat; /*important*/
padding:0px;
margin:-40px;
position:relative; /*important*/
left:800px;
}

index.php

<div id="searchwrapper"><form action="search.php">
<input type="text" class="searchbox" name="s" value="Search" onFocus="if (this.value=='Search')this.value='';" onBlur="if (this.value=='')this.value='Search'" />
<input type="image" src="Images/submit2.jpg" class="searchbox_submit" value="" />
</form></div>


    </div>

The search box image does not appear why is it ?

http://www.masterlink.co.id/cgoods/index.php

it works in my localhost but not online.

Check your path, your CSS will have to have a relative or absolute path to your image. Make sure it is correct.

After transfering file to the webserver, it seems like most of files are reducing in size. Why is it ? The file in my localhost are larger than the one in my webserver.

My transfer ftp mode is auto.

Set your transfer mode to binary for all files.