[thelist] aligning form image buttons

[Dan McCullough]

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 !