Sent by Robert Hanson on 26 July 2004 15:03
I'm working on styling a form submit button to make it an image, rather
than a html button; and have that image specified by CSS. The goal is a
cross-browser compatible implimentation that has mouse-over effects, and
which allows me to change the image used as the button by simply changing
CSS files.
Here is what I have so far; any comments?
One note: In the web page, there are two methods for firing the submit -
one is the submit button, the second is a <a> tag. Either one causes the
form to be submitted. I need both because the styled submit button (the
image) does not show on Opera 7. The method used is to provide a enclosing
relatively-positioned or absolutedly-positioned div; then use absolute
positioning to place both the submit tag and the <a> tag at the same
point..
The CSS attempts to use one of the well-known text replacement techniques,
but I was unable to get it to work correctly for one of the browssers
(Opera, I think) so the html has no text for either the submit button or
the <a> tag. If someone can suggest a way to fix this too, it would be
nice (Does any image replacement technique work in Opera 7?)
This works on IE 6.0, IE Mac 5, Mozilla 1.5a, and Opera 7. Any other
browser tests would be appreciated.
<HTML>
<HEAD>
</HEAD>
<BODY>
<form method=post name=form1>
<input name=txt>
<input type=submit class=SignInFormButton value="">
<div style="position: relative">
<input type=submit class=reg2_registerButton value="" id=submit1 name=submit1>
<a class=reg2_registerButton onclick="document.form1.submit(); return(false)" href=#></a>
</div>
</form>
</BODY>
</HTML>
Relevant CSS
/* --- Register button -- */
..reg2_registerButton {
position: absolute; top: 0px; left: 115px;
border: solid green 1px;
cursor: hand;
border: 0px;
overflow:hidden;
background-image: url("../css_images/reg2/button2.gif"); background-repeat: no-repeat;
/* WIDTH: The actual width of the image */
width: 180px;
/* HEIGHT: First number of padding; and number in 2nd height; is actual height of image */
padding-top: 62px;
height: 0px !important;
height /**/: 62px;
}
..reg2_registerButton:hover {
background-image: url("../css_images/reg2/button2.gif"); background-repeat: no-repeat;
}
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
