I tried this markup in IE6 and Firefox 1.5 without [margin:6px 0 -6px 0;]. Everything lines up well. It is obviously some other CSS that affects your button. I agree with Seona's suggestion #foo button img { margin: 0; padding: 0; }

Cheers, Irina.

On 2/28/06, Ted Drake <[EMAIL PROTECTED]> wrote:
Hi All

I'm having some trouble using an image as a button in a form. I've zeroed
out the margins and paddings in this simple search box and yet the button
wants to sit about 6px higher than the label and input. I've added this
klunky css, margin:6px 0 -6px 0;
This just doesn't look good to me.  I'm pushing it down 6px and then sucking
up the bottom by 6px. If I don't do this, it pushes the label and input down
6px.

I haven't worked with buttons much, I prefer to leave the submit buttons
alone.  Does anyone have a suggestion?  Here's the code:

<form name="searchForm" action="" method="GET" >checkQuery(this);">
<label for="" foo:</label>
<input type="text" name=" foo " id="prod" size="50" />
<button name="submit" type="submit">
<img src="" alt="Submit Button" />
</button>
</form>

#foo form { text-align:center; padding:0; }
#foo label { color:#fff; font-size:85%; margin:0 5px; font-weight:bold; }
#foo input  { margin:0 5px;}
#foo button {border:none; height:23px; background:none; padding:0 0 0 0;
margin:6px 0 -6px 0;}

Thanks

Ted Drake
-- New Advanced CSS Resource Site: www.last-child.com
Contributions welcome, especially safari fine-tuning (I don't have a mac)

******************************************************
The discussion list for  http://webstandardsgroup.org/

See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************


Reply via email to