Hi guys, I'm trying to improve the appearance of my submit and reset buttons at the bottom of the page. http://thienkaiwei.com/contactus8a.php The code I'm using are from two simple examples. How to Make a Text Link Submit A Form CSS Oval buttons Here's the code for my submit form. Sorry if it's a bit long. It has the CSS and javascript needed to make it work. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <script language="JavaScript"> var message = "Copyright © My Drum School Singapore. All Rights Reserved. "; function rtclickcheck(keyp){ if (navigator.appName == "Netscape" && keyp.which == 3){ alert(message); return false; } if (navigator.appVersion.indexOf("MSIE") != -1 && event.button == 2) { alert(message); return false; } } document.onmousedown = rtclickcheck; </script> <head> <script> window.history.forward(); </script> <script type="text/javascript" src="valcal13.js"></script> <script type="text/javascript" src="swfobject.js"></script> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>My Drum School | Contact Us</title> <link href="style.css" rel="stylesheet" type="text/css"> <style type="text/css"> /*Credits: Dynamic Drive CSS Library */ /*URL: http://www.dynamicdrive.com/style/ */ a.ovalbutton{ background: transparent url('images/oval-orange-left.gif') no-repeat top left; display: block; float: left; font: normal 13px Tahoma; /* Change 13px as desired */ line-height: 16px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 24px) */ height: 24px; /* Height of button background height */ padding-left: 11px; /* Width of left menu image */ text-decoration: none; } a:link.ovalbutton, a:visited.ovalbutton, a:active.ovalbutton{ color: #494949; /*button text color*/ } a.ovalbutton span{ background: transparent url('images/oval-orange-right.gif') no-repeat top right; display: block; padding: 4px 11px 4px 0; /*Set 11px below to match value of 'padding-left' value above*/ } a.ovalbutton:hover{ /* Hover state CSS */ background-position: bottom left; } a.ovalbutton:hover span{ /* Hover state CSS */ background-position: bottom right; color: black; } .buttonwrapper{ /* Container you can use to surround a CSS button to clear float */ overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */ width: 100%; } --> </style> <script language="JavaScript" type="text/JavaScript"> <!-- function MM_reloadPage(init) { //reloads the window if Nav4 resized if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) { document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }} else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload(); } MM_reloadPage(true); //--> </script> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> function getsupport ( selectedtype ) { document.form1.supporttype.value = selectedtype ; document.form1.submit() ; } </script> </head> <body> <form method="post" form id="form1" enctype="multipart/form-data" name="form1" style="margin:4px 0px 0px; padding:0px" onSubmit="return validate(this);"> <?php $ipi = getenv("REMOTE_ADDR"); $httprefi = getenv ("HTTP_REFERER"); $httpagenti = getenv ("HTTP_USER_AGENT"); ?> <div id="submit"> <input type="submit" value="Send Mail" src="http://thienkaiwei.com/images/submitbutton.gif"/> <input type="reset" value="Reset Form" /> </div> <div class="buttonwrapper"> <input type="hidden" name="supporttype" /> <a href="javascript:getsupport('Send')" class="ovalbutton">Send Mail</a> </div> </form> </body> </html> Code (markup): At first I managed to get the graphic part working, though the button function is not working. I then experimented with other methods, but found this to be the simplest and revert back to this. However, I'm missing something somewhere and now the oval button image is not showing properly. http://thienkaiwei.com/contactus8a.php Can anyone advice me on how to get the anchor link to work properly with the input submit & reset button? In a BIG hurry to finish this... Thanks in advance, and Happy New Year
I can't see your problem exactly. But I tried the Dynamic Drive Code and it works fine. Do you just need to add the <span> tags. <style type="text/css"> /*Credits: Dynamic Drive CSS Library */ /*URL: http://www.dynamicdrive.com/style/ */ a.ovalbutton{ background: transparent url('oval-orange-left.gif') no-repeat top left; display: block; float: left; font: normal 13px Tahoma; /* Change 13px as desired */ line-height: 16px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 24px) */ height: 24px; /* Height of button background height */ padding-left: 11px; /* Width of left menu image */ text-decoration: none; } a:link.ovalbutton, a:visited.ovalbutton, a:active.ovalbutton{ color: #494949; /*button text color*/ } a.ovalbutton span{ background: transparent url('oval-orange-right.gif') no-repeat top right; display: block; padding: 4px 11px 4px 0; /*Set 11px below to match value of 'padding-left' value above*/ } a.ovalbutton:hover{ /* Hover state CSS */ background-position: bottom left; } a.ovalbutton:hover span{ /* Hover state CSS */ background-position: bottom right; color: black; } .buttonwrapper{ /* Container you can use to surround a CSS button to clear float */ overflow: hidden; /*See: http://www.quirksmode.org/css/clearing.html */ width: 100%; } </style> <h4>Single button:</h4> <div class="buttonwrapper"> <a class="ovalbutton" href="http://www.dynamicdrive.com/style/"><span>Dynamic Drive CSS Library</span></a> </div> <h4>Side by Side:</h4> <div class="buttonwrapper"> <a class="ovalbutton" href="#"><span>Submit</span></a> <a class="ovalbutton" href="#" style="margin-left: 6px"><span>Reset</span></a> </div> Code (markup):
Hi, Issue is this : <input type="submit" value="Send Mail" src="http://thienkaiwei.com/images/submitbutton.gif"/> Solution is this : <input type="image" value="Send Mail" src="http://thienkaiwei.com/images/submitbutton.gif"/> Thanks, >Harry
Hi guys, thanks for replying! Both worked! I left out the span tags LOL. Harry, I changed the input type to image, but how did it still recognize itself as a submit type button? Will it screw up anything regarding sending the information in the form?
Hi, Solution is add a small javascript code that will do this: on that image button click submit the form Thanks, >Harry
Okay, I managed to get anchor working using the following: <a href="javascript:{}" onclick="document.getElementById('form1').submit(); return false;" class="ovalbutton"><span>Send Mail</span></a> Code (markup): It sort of works, I think. However the validation is not working. It somehow bypassed the validation code and did not generate the pop-up stating that the visitor is missing the required fields. Try clicking on the original grey submit button without entering anything, and it should generate a pop-up. The validation script I'm using is declared at the front, using valcal13.js. <head> <script> window.history.forward(); </script> <script type="text/javascript" src="valcal13.js"></script> <script type="text/javascript" src="swfobject.js"></script> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>My Drum School | Contact Us</title> Code (markup): Anyway to get the anchor javascript working with the validation script?
Another problem I have is getting the pop-up box to work. I'm uisng a javascript plugin, which works fine. But I can't adjust the vertical position of the box, and the border I set just won't show up. When you visit my page, you should see a white box dropping down and bouncing several times before it stops http://thienkaiwei.com/contactus8a.php Here's the code <script type="text/javascript">// Drop-in content box- By Dynamic Drive // For full source code and more DHTML scripts, visit http://www.dynamicdrive.com // This credit MUST stay intact for use var ie=document.all var dom=document.getElementById var ns4=document.layers var calunits=document.layers? "" : "px" var bouncelimit=32 //(must be divisible by 8) var direction="up" function initbox(){ if (!dom&&!ie&&!ns4) return crossobj=(dom)?document.getElementById("dropin").style : ie? document.all.dropin : document.dropin scroll_top=(ie)? truebody().scrollTop : window.pageYOffset crossobj.top=scroll_top-250+calunits crossobj.visibility=(dom||ie)? "visible" : "show" dropstart=setInterval("dropin()",50) } function dropin(){ scroll_top=(ie)? truebody().scrollTop : window.pageYOffset if (parseInt(crossobj.top)<100+scroll_top) crossobj.top=parseInt(crossobj.top)+40+calunits else{ clearInterval(dropstart) bouncestart=setInterval("bouncein()",50) } } function bouncein(){ crossobj.top=parseInt(crossobj.top)-bouncelimit+calunits if (bouncelimit<0) bouncelimit+=8 bouncelimit=bouncelimit*-1 if (bouncelimit==0){ clearInterval(bouncestart) } } function dismissbox(){ if (window.bouncestart) clearInterval(bouncestart) crossobj.visibility="hidden" } function truebody(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } window.onload=initbox </script> <div id="dropin" style="position:absolute;visibility:hidden;left:300px; bottom:400px;width:500px;height:300px;background-color:#FFF; border:medium; border-color:#ff9800;"> <div align="right"><a href="#" onClick="dismissbox();return false">[Close Box] </a></div> SPECIFY YOUR CONTENT HERE. IT COULD BE TEXT, IMAGES, OR RICH HTML </div> Code (markup): I can't see what am I missing out...
Hi all. I managed to get it right. Quite simple really, just use the <input> tag, and apply styling to set the background and border to none, then just a background img.