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: <http://www.ambiguism.com/CSSD/form.gif>

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

<fieldset>
	<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();" />
</fieldset>


Links, tuts, examps, suggestions?

Many many many TIA,
Cheers,
Micky

______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7b2 testing hub -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message