I have a form to submit in html. I want the submit button to have a background image (currently, a 1-pixel gradient that needs to be repeated along the x) with some text ("Sign In") on top of this image. I need them separate--background image + text--so don't ask me to put the text into the image because that's not an option for me. There are basically two ways to submit forms (without javascript): input type="submit" or type="image." There are two problems with using "image": I don't know how to add text on top of the image, and I don't think the image can be repeated along the x (because I only have a 1-pixel slice). The problem I come across using type="submit" is that I am not able to set a background-image (styling). Nor am I able to remove the border (border: none).. But I am able to set the width, height, color, font, and all that other good stuff. So basically, the two things that I need--to set a background image and to remove the border created the submit button uses--are the only styling elements that don't work. Here is currently what I have:
markup: <input id="submit" type=submit value="Sign In"/>
styling:
#submit {
width: 74px;
background-image: url(../images/signinbutton.png);
height: 21px;
border-style: none;
color: white;
font-size: 7pt;
font-family: Arial;
font-weight: 700;
}
I know that the url is pointing to the right image. And again, this produces a button with a border and the standard 'submit' button look--i.e., no background image--but the font, color, and button size is styled to my liking.
HELP.
markup: <input id="submit" type=submit value="Sign In"/>
styling:
#submit {
width: 74px;
background-image: url(../images/signinbutton.png);
height: 21px;
border-style: none;
color: white;
font-size: 7pt;
font-family: Arial;
font-weight: 700;
}
I know that the url is pointing to the right image. And again, this produces a button with a border and the standard 'submit' button look--i.e., no background image--but the font, color, and button size is styled to my liking.
HELP.