[thelist] aligning form image buttons

Garrett Coakley garrett at polytechnic.co.uk
Wed Jun 30 03:09:30 CDT 2004


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



More information about the thelist mailing list