A lickle bit of a css question!

[kimpossible]

Ok I've set up my blog and installed a theme that I'm happy with (for now)! YAY! GO ME! 
 
I'm just tweaking the look and I've managed to work out most of it myself but I'm stuck with this one at the moment:

I have a search box on the top right side (http://kisto.co.uk/). I managed to change the background of the form to white :polite golf clap:, but I can't work out how to resize it (to reduce the height of the white box but keep everything around it exactly the same).

Here's the css (.......this is where I find I'm not looking at the right part!  )

Code:

#search {
background: #f3f3f3;
padding: 0 20px;
margin-bottom: 20px;

}
#search #s {
background: #ffffff;
border: 2px solid #f3f3f3;
height: 35px;
line-height: 25px;
padding-top: 10px;
width: 175px;
}
input#searchsubmit {
margin-left: 10px;
background: url(images/magnifier.gif) no-repeat right bottom;
width: 35px;
height: 35px;
border: none;
color: #666;
cursor: pointer;
}

I tried adjusting the height to 15px on this part:

Code:

#search #s {
background: #ffffff;
border: 2px solid #f3f3f3;
height: 15px;
line-height: 25px;
padding-top: 10px;
width: 175px;

This did make the white search box smaller (the size  I want it), but it also reduced the size of the grey background box (and it was top aligned, rather than centred if that makes sense)!

And finally I want the word "search" to appear in that box (which disappears just like magic when a visitor starts typing their search term in). 

[Mr Anderson]

This did make the white search box smaller (the size  I want it), but it also reduced the size of the grey background box (and it was top aligned, rather than centred if that makes sense)!

Add some padding to the form, eg:

Code:

#searchform { padding: 10px 0; }

And finally I want the word "search" to appear in that box (which disappears just like magic when a visitor starts typing their search term in). 

Code:

<input type="text" value="Search" name="s" id="s" onfocus="if (this.value == 'Search') this.value = '';" />

You should still have a label for the search input, even if you just hide with CSS it's still better than not having one:

Code:

<form method="get" id="searchform" action="http://kisto.co.uk/">
<div>
<label for="s">Search: </label><input type="text" value="" name="s" id="s" />
<input type="submit" id="searchsubmit" value="." />
</div>
</form>

Code:

#searchform label { position: absolute; top: -10000px; left: -1000px; }

[kimpossible]

Cheers Mr A - after a few wrong attempts I've pretty much got there....although I've not managed how to get this to work... (because I'm not sure where it should go!)

Code:

<input type="text" value="Search" name="s" id="s" onfocus="if (this.value == 'Search') this.value = '';" />

....but I'm not worried because the box is labelled search now anyway.

[Mr Anderson]

Cheers Mr A - after a few wrong attempts I've pretty much got there....although I've not managed how to get this to work... (because I'm not sure where it should go!)

Code:

<input type="text" value="Search" name="s" id="s" onfocus="if (this.value == 'Search') this.value = '';" />

That would just drop in in-place of this: <input type="text" value="" name="s" id="s" />

However the label is the best method for describing the field anyway