Need Help With Creating My Custom Submit Button

[jimmyoneshot]

In my site I want to create and style my submit buttons in a way that:-

1. validates as proper xhtml/css
2. still functions as an actual submit button without javascript
3. looks the way I've described below with 2 images applied to it:-

I basically want to be able to apply 2 images to each button, one for a general background to the button and one for an icon representing what the button does which will overlay the button and be to the left of the label of the button. For example a button which sends a message may have an icon of a small envelope whereas a button that confirms something may have an icon of a tick symbol but both buttons could make use of my background image I've made for them as their general background.

Is this possible in a valid javascript non javascript way or would I need to create the same image with the icons applied over and over again for every button?

[MrSnowDrop]

If you want to replace the standard button with an image, and at the same time make the form working on all browsers, you'll have at least to use the "onclick" command and that means a minimal Javascript use.

See the buttons in this site for example:
www.easycure.it/
Skip intro and access the main page: there're forms with graphic buttons in the "Contact" and "Newsletter" links - is the result you're looking for?

(Forum Users: sorry if i often refer to the above site, but i worked hard on it and i'm glad to present it as an example when it occurs)

[jimmyoneshot]

Thanks SnowDrop. Styling input buttons is more complicated than I thought so I'm leaving it till the end of the project now but at some point I'll figure it out I'm sure.

[Eye for Video]

Hey MrSnowDrop,
Since you mention it:

(Forum Users: sorry if i often refer to the above site, but i worked hard on it and i'm glad to present it as an example when it occurs)

have you ever validated the code on your page?
http://www.easycure.it/main.asp?lang=it
Validating here shows more than a few errors:
http://validator.w3.org/
Most probably have to do with the DOCTYPE declaration... you may want to check it out, since you are putting your page out for peer review. I notice it loads pretty slow/sporatic... it may be because of the code... so best to validate.
Best wishes,
Eye for Video
www.cidigitalmedia.com

[MrSnowDrop]

@EyeForVideo

have you ever validated the code on your page?
Most probably have to do with the DOCTYPE declaration... you may want to check it out, since you are putting your page out for peer review. I notice it loads pretty slow/sporatic... it may be because of the code... so best to validate.

Never done yet. I tried once, but in that site there are loads of JS scripts and effects... Well, i had various functional problems by adding the <DOCTYPE...> declaration, especially with some DIVs absolute-positions and scrolling scripts... it made me literally crazy
So, finally, i drastically decided to be a sort of "web anarchic" and avoided that important step! I know i've to validate my sites, but first i have to test them with the <DOCTYPE...> declaration and make them work perfectly, but i never find time to test.

When i talked about to take Easy Cure site "as an example", i didn't meant "perfect and validated"; rather i'd like to refer to many useful script functions and effects inside the site that seems to work correctly anyway.

Thanks and sorry for misunderstood

[Eye for Video]

MrSnowDrop,
No offense, but keep in mind that this is a "Web Developer" Forum... so of course you are going to come under peer review. The purpose is to help ALL of us be better developers... not just those asking for help.
To be honest, most developers that look at the link to your site will probably take one quick look and then view the source code... since that's sort of where we live. The visual display sort of comes second.
Seeing all the "position: absolute;", in-line CSS styling, and the use of so many tables, gives the impression that you really know very little about Web Development. Your source code is 5 times what it needs to be. Yes, you may have a few fancy effects, but that is all lost in all the overblotted, outdated code used to produce the page.
We really welcome you here to the Forum ... but honestly... I think you should go back and review basic Web page development, and the use of CSS to style your pages. Here is a good source of tutorials:
http://www.w3schools.com/
Then validate your pages as you develop them... not AFTER they are developed. Be all the ancharist you want... but Web browsers parse Web pages according the the rules specified by the DOCTYPE... like it or not. Don't assume that just because it displays OK for you, that it will display OK for your viewers.
Best of luck to ya!
Eye for Video
www.cidigitalmedia.com

[MrSnowDrop]

@EyeForVideo

...
We really welcome you here to the Forum ... but honestly... I think you should go back and review basic Web page development...

I'll follow your suggestion without problems. Just few considerations:
i'm not a professional web developer, and i'm sorry if my presence in tech replies is not appreciated without that recognition.

About the code that could be "5 times what it need to be":
the HTML code in Easy Cure page IS more concise than it seems, because it is written half/HTML and half/ASP+VBscript. That means that looping code is visibile in HTML and seems duplicated in a vain way, but that's not the real code because it ISN'T effectively wrote in HTML, but it's juse ONE loop ASP code instruction.

I see here many people asking for javascript/html/css basic tricks and i think to have at least enough knowledge to offer some modest suggestion, even if my works are not perfect or validated. Nothing else.
In the specific above case, just fot example, i'd like to offer my solution referred to graphic input buttons inside html forms, not surely to the whole site! Yes, i mentioned it as an example (i'll never do such a thing), but just referred to that particular thread subject.

So please, forgive all my references to my works, my mistake, and sorry to all.
I'll be more unobtrusive in my future posts

[MrSnowDrop]

...the purpose is to help ALL of us be better developers...

Closing definitively my previous post, i'm glad to inform that finally my sites have both successfully passed the w3schools validation (HTML-4.01 and CSS-2.1)!
Finally i've took all the necassary time to correct my code, it was only a silly question of time. And i have to admit that it's a satisfaction to have wiped out several imperfections!

You were absolutely right EyeForVideo, validation is a must and i was wrong in placing it behind other engagements. I wish to thank you.

Now it's funny to see errors in the official site of The Cure, when the italian coverband has a w3schools validation!

[Eye for Video]

I'm very proud of you! You took the time and effort needed to learn!
I know you are very willing to share and we all will be looking forward to more of your posts.
Best wishes!!
EfV

[Phoubers]

I'll assume your using XHTML 1.0 Transitional and CSS 1-2

CSS:

.styled{
 width:100px;height:22px;
 background:url(path/to/image.jpg) no-repeat;
 display:inline-block;
 border:none;outline:none;
}

XHTML:

<input type="submit" class="styled" />

Check out these pages for further help:
HTML / XHTML Reference

CSS Reference