SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Sep 2008
    Location
    Rudgwick, UK
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cant get the left-padding to work in this input

    Hi,

    Got a bit of an annoying one here

    I have this HTML:

    Code:
    	<form method="get" id="searchform" action="">
    <fieldset class="search">
    	<input type="text" class="box"/>
    	<button class="btn" title="Submit Search"></button>
    </fieldset>
    </form>
    ..and the following CSS:

    Code:
    fieldset.search {
    	border: none;
    	float: right;
    	width: 256px;
    	margin: 0 auto;
    	background: #FFFFFF;
    	padding: 40px 30px 1px 3px;
    }
    .search input, .search button {
    	border: none;
    	float: left;
    	
    }
    .search input.box {
    	border: none;
    	color: #6A6A6A;
    	font-size: 1.2em;
    	width: 187px;
    	height: 30px;
    	padding: 0 0 0 0;
    	background: #FFFFFF url(images/search_04.png) no-repeat right bottom;
    	margin-top: 9px;
    	margin-right: 6px;
    }
    
    
    
    .search button.btn {
    	width: 42px;
    	height: 42px;
    	cursor: pointer;
    	text-indent: -9999px;
    	background: #FFFFFF url(images/magnifying-glass.jpg) no-repeat top right;
    }
    .search button.btn:hover {
    	background: #FFFFFF url(images/magnifying-glass2.jpg) no-repeat bottom right;
    }
    ..and the 2 images:

    http://ultradev.com.nmsrv.com/magnifying-glass.jpg
    http://ultradev.com.nmsrv.com/magnifying-glass2.jpg

    This all works fine, with one little exception. I wanna add a few pixels padding to the left of the input.

    Can anyone suggest a way for me? =)

    TIA

  2. #2
    SitePoint Addict
    Join Date
    Sep 2008
    Location
    Rudgwick, UK
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Never mind - worked it out myself Just needed a left/right div. Heres the code if anyones having the same kinda issue:

    Code:
    fieldset.search {
    	border: none;
    	float: right;
    	width: 256px;
    	margin: 0 auto;
    	background: #FFFFFF;
    	padding: 40px 30px 1px 3px;
    }
    .search input, .search button {
    	border: none;
    	float: left;
    	
    }
    .search input.box {
    	border: none;
    	color: #6A6A6A;
    	font-size: 1.2em;
    	width: 160px;
    	height: 15px;
    	padding: 0 0 0 0;
    	padding-left: 8px;
    	padding-bottom: 3px;
    	background: none;
    	margin-top: 9px;
    	margin-right: 6px;
    }
    
    #wrapper_search_left {
    	width: 200px;
    	height: 30px;
        float: left;
    	background: #FFFFFF url(images/search_04.png) no-repeat right bottom;
    }
    
    #wrapper_search_right {
    	width: 52px;
    	height: 42px;
        float: left;
    	background: #FFFFFF;
    }

    Code:
    	<form method="get" id="searchform" action="">
    <fieldset class="search">
      <div id="wrapper_search_left">
    	<input type="text" class="box"/>
      </div>
      <div id="wrapper_search_right">
    	<button class="btn" title="Submit Search"></button>
      </div>
      <div style=" clear: both"></div>
    </fieldset>
    </form>
    Cheers

    Andy


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •