Minor CSS Help needed.

[BlaZe]

I tried my level best, but I couldn't do it.


See this search box.


The text 'Search' is stuck to the borders. I cannot move it a little bit more to right so that it comes inside the box.

Here is the CSS of it.

#search {
    display: inline;
    float: right;
    margin: 0px 5px 0 5px;
    padding: 0px 0 0;
    text-align: left;
    top: 0px;
}

#searchbox {
    width: 180px;
    float:left;
    padding: 5px 0px 3px 0px;
    background: url('images/search.png');
    border: 0;
    margin: 2px 2px 2px 0px;
    color: #fff;
    font-size: 11px;
    font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif;
}

.go {
    margin-top: 6px;
    margin-left: -20px;
    padding: 0px;
    color: #000;
    display:inline;
} 

Here is the form.

<form method="get" id="search" action="<?php bloginfo('home'); ?>/">
        <div><input type="text" value="Search" name="s" id="searchbox" onFocus="if (this.value == 'Search') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Search';}" />
        <input type="image" src="<?php bloginfo('template_directory'); ?>/images/go.png" align="top" alt="Search" class="go" value="Search" />
        
        </div>
        </form>

EDIT:

Live Website : http://scenexxx.com (+18, NSFW)

BlaZe Reviewed by BlaZe on 2nd Jun 2011. Minor CSS Help needed. I tried my level best, but I couldn't do it. See this search box. http://i.imm.io/66MP.png The text 'Search' is stuck to the borders. I cannot move it a little bit more to right so that it comes inside the box. Here is the CSS of it. Rating: 5