Previous Message
Next Message

Front-page search box: Room for CSS improvement?

Sent by Michael Hulse on 23 March 2006 15:03

Hi folks,

Below is HTML/CSS for a home page search box... I want the label, 
input, and search button graphic to align all on one line.

Example via Safari: <>

How could I improve-upon this code (basically I want it to be as 
cross-browser/platform compatible as possible, so far it works perfect 
in Safari - I did not include my code for fieldset/legend, but feel 
free to post bullet-proof code for that too):

form { margin: 0; padding: 0; }
form * { vertical-align: middle; }
label {
	font-size: .7em;
	font-weight: bold;
	letter-spacing: .1em;
	text-align: right;
	color: #fff;
	width: 5em;
	float: left; /* <-- Worried about this and IE/PC */
input.searchBox {
	border-width: 1px;
	border-style: solid;
	border-color: #555 #ccc;
	padding: 1px;
	width: 125px;
	height: 14px;
input.imgGo {
	width: 16px;
	height: 16px;
input:focus {
	background: #efefef;
	color: #000;

	<legend>Search our site:</legend>
		<label for="search">Search:&nbsp;</label><input class="searchBox" 
type="text" value="" name="search" id="search" maxlength="100" />
		<input class="imgGo" type="image" name="btnSearch" id="btnSearch" 
src="/images/template/go.gif" onclick="document.form1.submit();" />

Links, tuts, examps, suggestions?

Many many many TIA,

css-discuss [EMAIL-REMOVED]]
IE7b2 testing hub --
List wiki/FAQ --
Supported by --
Previous Message
Next Message