Re: [css-d] replace submit button with image, entirely with css?

2009-11-03 Thread Nick Fitzsimons 
2009/11/3 Jack Bates ms...@freezone.co.uk:
 I have a web application that I hope to style entirely with CSS, if
 possible

 The application includes a submit button, input type=submit
 value=Search /

 I want to replace this button with an image, so I tried the following
 CSS,

No need for CSS - HTML 4.01 (and therefore XHTML) already supports
graphical submit buttons.

From HTML 4.01 section 17.4.1
http://www.w3.org/TR/html401/interact/forms.html#h-17.4.1:

The control type defined by the INPUT element depends on the value of
the type attribute:
...
image
Creates a graphical submit button. The value of the src attribute
specifies the URI of the image that will decorate the button. For
accessibility reasons, authors should provide alternate text for the
image via the alt attribute.

Regards,

Nick.
-- 
Nick Fitzsimons
http://www.nickfitz.co.uk/
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] replace submit button with image, entirely with css?

2009-11-03 Thread Mark Richards 
 -Original Message-
 I have a web application that I hope to style entirely with CSS, if
 possible
 I want to replace this button with an image, so I tried the following
 CSS,
 
 input
 {
   background-color: transparent;
   background-image: url('index.png');
   background-repeat: no-repeat;
   border-style: none;
   height: 33px;
   width: 38px;
 }

I added

   color: transparent;
   font-size: 0px;

And that worked for me in FF3, Opera 10 and IE8.

Mark
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] replace submit button with image, entirely with css?

2009-11-03 Thread Mustafa Quilon 
Well, you could just add this rule:

input { text-indent: -px }

or what Nick said is valid too.

-
Mustafa Quilon
E - mustafavizcomr...@gmail.com | mustafaqui...@gmail.com
Skype, Twitter, Facebook, Linkedin - mustafaquilon
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] replace submit button with image, entirely with css?

2009-11-02 Thread Jack Bates 
I have a web application that I hope to style entirely with CSS, if
possible

The application includes a submit button, input type=submit
value=Search /

I want to replace this button with an image, so I tried the following
CSS,

input
{
  background-color: transparent;
  background-image: url('index.png');
  background-repeat: no-repeat;
  border-style: none;
  height: 33px;
  width: 38px;
}

This works great, except that the image still has the text Search over
top : (

Here's an example, http://www.sfu.ca/~jdbates/tmp/css/200911020/

Any advice how to replace this button with an image, without the text
Search over top? - or advice how the web application could be changed
such that this is achievable entirely with CSS?
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

Re: [css-d] replace submit button with image, entirely with css?

2009-11-02 Thread Tim Climis 
On Monday, November 2, 2009 7:04:13 pm Jack Bates wrote:
 I have a web application that I hope to style entirely with CSS, if
 possible
 
 The application includes a submit button, input type=submit
 value=Search /
 
 I want to replace this button with an image, so I tried the following
 CSS,
 
 input
 {
   background-color: transparent;
   background-image: url('index.png');
   background-repeat: no-repeat;
   border-style: none;
   height: 33px;
   width: 38px;
 }
 
 This works great, except that the image still has the text Search over
 top : (
 
 Here's an example, http://www.sfu.ca/~jdbates/tmp/css/200911020/
 
 Any advice how to replace this button with an image, without the text
 Search over top? - or advice how the web application could be changed
 such that this is achievable entirely with CSS?

Two things come to mind.  The first is to set the value attribute to be either 
empty or white space, so it doesn't write anything over your image.

The second is to make the image a submit button (rather than making the submit 
button an image)  something like:

form name=form_name
img alt=Search src=index.png 
onclick=document.form_name.submit();
/form

---Tim
__
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/