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

[Hillside]

#searchbox input {
margin-left: 15px;
}

Tried that?

[rahulparekh]

#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 10px;
    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;
}

That's padding-left. That should fix it.

[rahulparekh]

#searchbox input {
margin-left: 15px;
}

Tried that?

That's wrong as searchbox is the id for input box itself. Either use input#searchbox or #searchbox.

[Hillside]

it would be better if u link to the site where you're getting the error so we can see the whole code

[BlaZe]

@rahul,



Thats what I'm getting
===========

@Hillside,
Its on my localhost.

Here is the whole screenshot if you wanna see.
http://i.imm.io/676L.png

[Lock Down]

I would suggest the easiest way to be

value='      Search' 

Just add as many spaces to the front of it to get it aligned where you want it.

[BlaZe]

@Lock Down,

That was the last thing which came to my mind earlier, if I don't get it done with CSS, then I'll add that

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

[Lock Down]

Have you tried padding:15px in the search css. yet?

[CJ]

padding-left: 10px;
width: 165px;

in #searchbox & it works fine