Sent by Charles Roper on 10 September 2004 20:08
I've been hacking away trying to get an input box to align
horizontally with an input button. Is it just me or is this an
infuriatingly quirky area? It seems I can't get the input and button
to be the same height and align without hacking the CSS. Even then I
seem to get different results in Opera.
Does anyone have any reliable tips for getting inputs and buttons to
play nicely together? below are the rules I'm using; they work, but as
you can see there's a hack in the middle (the !important hack):
input#searchbox {
width: 75px;
border: 1px solid #999;
padding: 0; margin-top: 1px;
height: 16px;
font-size: 60%;
}
input#searchbutton {
padding: 0;
margin: 1px 0 0 2px !important;
margin: 2px 0 0 2px;
background-color: #9F78AC;
border: 1px solid #805B8C;
color: #fff;
font-size: 50%;
font-weight: bold;
font-family: Verdana, Helvetica, Arial, sans-serif;
width: 51px;
height: 18px;
vertical-align: top;
}
It applies to this HTML:
<input id="searchbox" name="searchbox" /><input id="searchbutton"
value="SEARCH" type="submit" />
Please excuse the untidy CSS and non-accessible form - I'm still
putting this thing together. Are hacks unavoidable if one want to get
neatly aligned and sized form elements; or are there some
cross-browser, reliable techniques out there that I've missed?
Many thanks.
--
Charles Roper
www.charlesroper.co.uk
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
