Cant get the left-padding to work in this input

HTML & CSS
1

Hi,

Got a bit of an annoying one here :frowning:

I have this HTML:

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

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

Never mind - worked it out myself :slight_smile: Just needed a left/right div. Heres the code if anyones having the same kinda issue:

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;
}

	<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