Minor CSS Help needed. - WJunction

BlaZe · 2nd Jun 2011, 10:02 AM

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.

PHP 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 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 Code:


			
<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 by BlaZe; 2nd Jun 2011 at 03:17 PM.

Hillside · 2nd Jun 2011, 10:19 AM

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

Tried that?

rahulparekh · 2nd Jun 2011, 12:07 PM

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 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 · 2nd Jun 2011, 12:09 PM

Quote:

Originally Posted by Hillside

#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 · 2nd Jun 2011, 01:04 PM

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

BlaZe · 2nd Jun 2011, 01:56 PM

@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 · 2nd Jun 2011, 03:06 PM

I would suggest the easiest way to be

PHP Code:


			
value='      Search'

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

BlaZe · 2nd Jun 2011, 03:09 PM

@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)

Last edited by BlaZe; 2nd Jun 2011 at 03:17 PM.

Lock Down · 2nd Jun 2011, 03:33 PM

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

CJ · 2nd Jun 2011, 03:38 PM

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

in #searchbox & it works fine

2nd Jun 2011, 10:02 AM	#1
BlaZe Website(s): BeastieBay.net iPhoneLOL.com My Statistics Join Date: Oct 2009 Posts: 3,593 Liked: 600 Times Rep Power: 13	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. PHP 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 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 Code: <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 by BlaZe; 2nd Jun 2011 at 03:17 PM.
	Quote

2nd Jun 2011, 03:06 PM	#7
Lock Down My Statistics Join Date: Feb 2010 Posts: 1,780 Liked: 181 Times Rep Power: 7	I would suggest the easiest way to be PHP Code: `value=' Search'` Just add as many spaces to the front of it to get it aligned where you want it.
	Quote

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Need a Minor Help on Java	Cool Aquarius™	Development Area	3	20th Jan 2011 07:46 PM
DEDICATED,ACTIVE NEEDED - Moderators/GM's Needed with BENEFITS	robert	Community Cooperative	0	18th Jul 2010 03:36 PM

2nd Jun 2011, 10:19 AM	#2
Hillside My Statistics Join Date: Oct 2010 Posts: 1,592 Liked: 3 Times Rep Power: 4	#searchbox input { margin-left: 15px; } Tried that?
	Quote

2nd Jun 2011, 01:04 PM	#5
Hillside My Statistics Join Date: Oct 2010 Posts: 1,592 Liked: 3 Times Rep Power: 4	it would be better if u link to the site where you're getting the error so we can see the whole code
	Quote

2nd Jun 2011, 01:56 PM	#6
BlaZe Website(s): BeastieBay.net iPhoneLOL.com My Statistics Join Date: Oct 2009 Posts: 3,593 Liked: 600 Times Rep Power: 13	@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
	Quote

2nd Jun 2011, 03:09 PM	#8
BlaZe Website(s): BeastieBay.net iPhoneLOL.com My Statistics Join Date: Oct 2009 Posts: 3,593 Liked: 600 Times Rep Power: 13	@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) Last edited by BlaZe; 2nd Jun 2011 at 03:17 PM.
	Quote

2nd Jun 2011, 03:33 PM	#9
Lock Down My Statistics Join Date: Feb 2010 Posts: 1,780 Liked: 181 Times Rep Power: 7	Have you tried padding:15px in the search css. yet?
	Quote

2nd Jun 2011, 03:38 PM	#10
CJ Website(s): loledhard.com My Statistics Join Date: Nov 2009 Posts: 3,742 Liked: 872 Times Rep Power: 15	padding-left: 10px; width: 165px; in #searchbox & it works fine
	Quote