Status
Not open for further replies.

BlaZe

Active Member
Veteran
3,985
2009
767
485
I tried my level best, but I couldn't do it.


See this search box.
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.

PHP:
#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.

PHP:
<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)
 
Last edited:
25 comments
Code:
#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 [B]10px[/B];
    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.
 
@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 :p

EDIT:
Live Website : http://scenexxx.com (+18, NSFW)
 
Last edited:
Replace #searchbox
Code:
#searchbox { 	width: 180px; 	float:left; 	padding: 5px 10px 3px 10px; 	background: url('images/search.png') no-repeat; 	border: 0; 	margin: 2px 2px 2px 0px; 	color: #fff; 	font-size: 11px; 	font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif; }
 
:) Have you tried padding:15px in the search css. yet?
Yup, it didn't work.
padding-left: 10px;
width: 165px;

in #searchbox & it works fine
zdWb1.png
It work too :(
In the CSS file
Find

#searchbox
Change


To this


Thanks
Its perfect ! This worked ! THANKS !!!!!!!
Replace #searchbox
Code:
#searchbox {     width: 180px;     float:left;     padding: 5px 10px 3px 10px;     background: url('images/search.png') no-repeat;     border: 0;     margin: 2px 2px 2px 0px;     color: #fff;     font-size: 11px;     font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, Sans-Serif; }
I'll try it and will tell.

EDIT:

This worked too ! Thanks !
This is going to repeat the bg, as there is no rule set for it :P
It worked.
 
Oh my, I'm idiot.

This is how its looking now
67je.png


Now please guide how can I shift the magnifying glass to more left. lol
 
Firstly make the width of

#searchbox

to 160px;

example

width:160px;

Edit.................

and remove this from CSS

/**
#searchbox {
width: 180px;
float:left;
padding: 5px 10px 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;
}
*//
 
Thats the original code. I kept it as backup.

This is how its looking after the 160px width

67lf.png


PHP:
/***** SEARCH FORM FORMATTING *****/

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

#searchbox {
    width: 160px;
    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;
}
 
Status
Not open for further replies.
Back
Top