this is the style we use for our submit button
input.submit {
border: 3px double #999;
border-top-color: #ccc;
border-left-color: #ccc;
padding: 0.15em;
background: #feb333 url(../images/o.gif) repeat-x 0 0;
color: #333;
font-weight: bold;
margin:0 10px;
font-size:10px;
}
input.submit:hover {background: #feb333 url(../images/oh.gif) repeat-x 0
0;color:#f2f2f2;}
It came from a page that suggested it for making buttons look like the
macromedia web site.
You could try using background images, padding, margins, etc. But I have
noticed some browsers completely ignore input styles.
Ted
-----Original Message-----
From: Andreas Boehmer [mailto:[EMAIL PROTECTED]
Sent: Thursday, December 16, 2004 2:52 PM
To: [EMAIL PROTECTED]
Subject: [WSG] accessible image form buttons
What would you recommend is the best way to create a form with a submit
button made up of text+image? So what I have planned is the word
"Search" followed by a little icon. The user can click either of them
and the form will submit.
I am playing with multiple solutions, but have not found anything yet
that I like:
SOLUTION 1:
<BUTTON>
Search <img src="button.gif" alt="Search">
</BUTTON>
Problem: Doesn't work in older browsers (e.g. NN4).
SOLUTION 2:
<a href="javascript:submitForm()">Search</a>
<input type="image" src="button.gif" alt="Search">
Problem: Relies on Javascript to submit the form when text is clicked.
SOLUTION 3:
<input type="image" src="Searchbutton.gif" alt="Search">
(image includes text & search icon)
Problem: The text-size can't be increased by the user.
I'd be interested to hear if anybody has found a nice solution for this?
Thanks!
Andreas Boehmer
User Experience Consultant
Phone: (03) 9417 0468
Mobile: (0411) 097 038
http://www.addictiveMedia.com.au
Consulting | Accessibility | Usability | Development
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
