1. BlaZe

    BlaZe Well-Known Member Respected

    Oct 18, 2009
    3,961
    I tried my level best, but I couldn't do it.


    See this search box.
    [​IMG]

    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 {
        
    displayinline;
        
    floatright;
        
    margin0px 5px 0 5px;
        
    padding0px 0 0;
        
    text-alignleft;
        
    top0px;
    }

    #searchbox {
        
    width180px;
        
    float:left;
        
    padding5px 0px 3px 0px;
        
    backgroundurl('images/search.png');
        
    border0;
        
    margin2px 2px 2px 0px;
        
    color#fff;
        
    font-size11px;
        
    font-family"Lucida Grande""Lucida Sans Unicode"ArialHelveticaSans-Serif;
    }

    .
    go {
        
    margin-top6px;
        
    margin-left: -20px;
        
    padding0px;
        
    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: Jun 2, 2011
  2. Hillside

    Hillside New Member Member

    Oct 13, 2010
    1,535
    #searchbox input {
    margin-left: 15px;
    }

    Tried that?
     
  3. rahulparekh

    rahulparekh New Member Member

    Mar 30, 2011
    103
    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.
     
  4. rahulparekh

    rahulparekh New Member Member

    Mar 30, 2011
    103

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

    Hillside New Member Member

    Oct 13, 2010
    1,535
    it would be better if u link to the site where you're getting the error so we can see the whole code >:)
     
  6. BlaZe

    BlaZe Well-Known Member Respected

    Oct 18, 2009
    3,961
    @rahul,

    [SLIDE]http://i.imm.io/676z.png[/SLIDE]

    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
     
  7. Lock Down

    Lock Down New Member Member

    Feb 21, 2010
    2,122
    I would suggest the easiest way to be
    PHP:
    value='      Search'
    Just add as many spaces to the front of it to get it aligned where you want it.
     
  8. BlaZe

    BlaZe Well-Known Member Respected

    Oct 18, 2009
    3,961
    @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: Jun 2, 2011
  9. Lock Down

    Lock Down New Member Member

    Feb 21, 2010
    2,122
    :) Have you tried padding:15px in the search css. yet?
     
  10. CJ

    CJ New Member Respected

    Nov 21, 2009
    3,796
    padding-left: 10px;
    width: 165px;

    in #searchbox & it works fine
    [​IMG]
     
  11. warezrock

    warezrock New Member Member

    Dec 12, 2009
    704
    In the CSS file
    Find

    #searchbox
    Change
    To this
    Thanks
     
  12. ProtoWorker

    ProtoWorker Well-Known Member Member

    Jan 12, 2010
    1,180
    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; }
    
     
  13. ProtoWorker

    ProtoWorker Well-Known Member Member

    Jan 12, 2010
    1,180
    This is going to repeat the bg, as there is no rule set for it :P
     
  14. BlaZe

    BlaZe Well-Known Member Respected

    Oct 18, 2009
    3,961
    Yup, it didn't work.
    It work too :(
    Its perfect ! This worked ! THANKS !!!!!!!
    I'll try it and will tell.

    EDIT:

    This worked too ! Thanks !
    It worked.
     
  15. BlaZe

    BlaZe Well-Known Member Respected

    Oct 18, 2009
    3,961
    Thanks everyone for your putting your time into it :)
     
  16. warezrock

    warezrock New Member Member

    Dec 12, 2009
    704
    Your welcome :) :)
     
  17. BlaZe

    BlaZe Well-Known Member Respected

    Oct 18, 2009
    3,961
    Oh my, I'm idiot.

    This is how its looking now
    [​IMG]

    Now please guide how can I shift the magnifying glass to more left. lol
     
  18. warezrock

    warezrock New Member Member

    Dec 12, 2009
    704
    Firstly make the width of

    #searchbox

    to 160px;

    example

    width:160px;

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

    and remove this from CSS

     
  19. BlaZe

    BlaZe Well-Known Member Respected

    Oct 18, 2009
    3,961
    Thats the original code. I kept it as backup.

    This is how its looking after the 160px width

    [​IMG]

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

    #search {
        
    displayinline;
        
    floatright;
        
    margin0px 25px 0 0px;
        
    padding0px 0px 0 0px;
        
    text-alignleft;
        
    top0px;
    }

    #searchbox {
        
    width160px;
        
    float:left;
        
    padding5px 0px 3px 10px;
        
    backgroundurl('images/search.png');
        
    border0;
        
    margin2px 2px 2px 0px;
        
    color#fff;
        
    font-size11px;
        
    font-family"Lucida Grande""Lucida Sans Unicode"ArialHelveticaSans-Serif;
    }

    .
    go {
        
    margin-top6px;
        
    margin-left: -20px;
        
    padding0px;
        
    color#000;
        
    display:inline;
    }
     
  20. warezrock

    warezrock New Member Member

    Dec 12, 2009
    704
    make width 170px;

    of #searchbox the one which is not comment out :P
     
    Last edited: Jun 2, 2011

Share This Page