Re: Solution! RE: [WSG] form button css
Ted, Tuesday, February 28, 2006, 3:13:42 AM, you wrote: TD I'm using button with an image per Thierry's suggestion. I didn't want to TD use background image on an input because there are some browser TD inconsistencies and I didn't want to use an image in the input due to some TD accessibility concerns. Did you test if the button works? AFAIR IE has serious problems with the button tag. If there are more than one button on a page, it's impossible to detect which one had been clicked. I only use the button tag for buttons that trigger JavaScript. For everything else I use inputs. regards, Martin ** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list getting help **
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.
Im using button with
an image per Thierrys suggestion. I didnt want to use background image on an
input because there are some browser inconsistencies and I didnt 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.
Ive checked it in FF 1.5 and IE6.
Im using the
Has anyone come
across any problems using vertical-align?
By the way, Im
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. Ive begun by transferring posts
from my other site. Its still a bit rough in Safari and Im ignoring IE6 as
it isnt 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 GellanSent: Monday, February 27, 2006 5:44
PMTo:
wsg@webstandardsgroup.orgSubject: 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" 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
RE: Solution! RE: [WSG] form button css
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 Ill 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.
Im using button with an image per
Thierrys suggestion. I didnt want to use background image on an
input because there are some browser inconsistencies and I didnt 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. Ive checked
it in FF 1.5 and IE6.
Im using the
Has anyone come across any problems using
vertical-align?
By the way, Im 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. Ive begun by
transferring posts from my other site. Its still a bit rough in Safari
and Im ignoring IE6 as it isnt 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
