RE: Solution! RE: [WSG] form button css

[Ted Drake]

Hi Sharron Thanks for the note. I just started working on the site Saturday and have tons of work fixing pages. The content is from my other site, which is getting watered down with posts about photography, culture, etc. Yes, please leave a comment on the post and I’ll fix it as soon as possible. I was a teacher up until recently and I feel the drive to teach. I had to quit when I moved to work with Yahoo. This new site is my way of helping to teach others.   Ted     From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of [EMAIL PROTECTED] Sent: Monday, February 27, 2006 6:42 PM To: wsg@webstandardsgroup.org Subject: Re: Solution! RE: [WSG] form button css   Ted, I apologize for getting off topic. I visited you site last-child.com, and your link to FF Alistapart search box won't work for me.  Using FF, also can't seem to locate a contact link to notify you. Do you mean for folks who find things that don't seem to work to leave a comment in the comments areas? I am a bit confused.   Like they site by the way, bookmarked it! ----- Original Message ----- From: Ted Drake To: wsg@webstandardsgroup.org Sent: Monday, February 27, 2006 8:13 PM Subject: Solution! RE: [WSG] form button css   Ok, I found the ultimate solution while working on another section where inline images were not aligning with text.   I’m using button with an image per Thierry’s suggestion. I didn’t want to use background image on an input because there are some browser inconsistencies and I didn’t want to use an image in the input due to some accessibility concerns.   So, the final css: #ytTopSearch button {border:none;  background:none; padding:0; margin:0; vertical-align:middle; cursor:pointer; *cursor:hand; }   Vertical-align:middle has the submit button and inline images centered vertically with the text. I’ve checked it in FF 1.5 and IE6.   I’m using the Has anyone come across any problems using vertical-align?    By the way, I’m working on a new site, www.last-child.com that will be my little scrapbook of code snippets, solutions, etc. This will be an example of the kind of quick tip that will be available. I’ve begun by transferring posts from my other site. It’s still a bit rough in Safari and I’m ignoring IE6 as it isn’t representative of browsers used by advanced CSS programmers.   Feel free to kick the tires, leave suggestions, find errors, etc.   Ted     From: [EMAIL PROTECTED] [mailto:[EMAIL PROTECTED] On Behalf Of James Gellan Sent: Monday, February 27, 2006 5:44 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] form button css   Ted,   Its relatively easy to do what you are trying to do ......I accomplished the same thing on my site with this code..... .newsletter-button1 {font-family:'Street Corner'; font-style:normal; font-variant:small-caps; font-weight:normal; font-size:10px; color:rgb(51,51,51); letter-spacing:3px; background-color:white; background-image:url('images/silvernavbar.gif'); border-width:1px; border-color:black; border-style:solid; width:80px; } .style131 {font-family: "Street Corner"} .style129 {color: #434343; font-weight: bold; font-family: "Street Corner"; font-size: 12px; font-style: normal; line-height: normal; font-variant: normal; text-transform: none; }   Thanks, James Gellan Rayne Creative 404-468-6347   ----- Original Message ----- From: "Ted Drake" <[EMAIL PROTECTED]> To: <wsg@webstandardsgroup.org> Sent: Monday, February 27, 2006 19:48 Subject: [WSG] form button css   > 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 > ****************************************************** > No virus found in this incoming message. Checked by AVG Free Edition. Version: 7.1.375 / Virus Database: 268.1.0/269 - Release Date: 2/24/2006