[thelist] aligning form image buttons
Dan McCullough
dmccullough at garnethill.com
Wed Jun 30 06:52:15 CDT 2004
Thanks for the information. I took a break from the codign and did some
other things to clear my mind, and no I didn't have anything from
Starbucks.
Anyway in the input type="image" tag I put style="vertical-align:
bottom" fixed it.
-----Original Message-----
From: thelist-bounces at lists.evolt.org
[mailto:thelist-bounces at lists.evolt.org] On Behalf Of Garrett Coakley
Sent: Wednesday, June 30, 2004 4:10 AM
To: thelist at lists.evolt.org
Subject: Re: [thelist] aligning form image buttons
On Tue, Jun 29, 2004 at 11:42:36AM -0400, Dan McCullough wrote:
> I usually don't bother with this as I usually have the submit
> button/image off by itself. In this design the fact that it doesn't
> line up is very evident. I need to align it to the bottom of the text
> box and it does seem to do that.
Presuming I've understood your request correctly...
Just grabbed this from a site I'm working on at the minute. Lines up
in IE5/5.5/6 but it's a little off in Gecko based browsers. If
pixel precision is important, then you could probably take care of
that by using a CSS filter to feed Gecko slightly different margins on
the button.
I've put a screenshot of the render (IE6) up at
http://polytechnic.co.uk/evolt/input_submit_lineup.png so you can see
the result.
label {
margin: 0 0 0 0;
padding: 0 0 0 0;
display: block;
}
input[type=text] {
margin: 2px 0 0 1em;
}
input.go {
margin: 0 0 2px 2px;
padding: 0 0 0 0;
vertical-align: bottom;
}
<form method="get" action="search.php">
<fieldset>
<label for="keywords">Quick Search</label>
<input type="text" name="keywords" id="keywords" value="" />
<input type="image" src="search.gif" name="submit" class="go"
value="Go" />
</fieldset>
</form>
HTH
G.
--
------------------------------------------------------------------------
Work : http://www.gencon.co.uk & http://spiked.co.uk
Play : http://polytechnic.co.uk
Learn : http://evolt.org
--
* * Please support the community that supports you. * *
http://evolt.org/help_support_evolt/
For unsubscribe and other options, including the Tip Harvester
and archives of thelist go to: http://lists.evolt.org
Workers of the Web, evolt !
More information about the thelist
mailing list