visitor Posted September 4, 2011 Share Posted September 4, 2011 Hi there I would like to label a button but so far I failed terribly. I tried the following... <table border="0" cellspacing="0" cellpadding="0"> <tr> <td style="background-image(url:round_corner.gif)" width="116px" height="21px" align="center"><b>Home</b></td> </tr> </table> <input type="image" src="round_corner.gif" width="116px" height="21px" value="Home" onclick='return verify();'/> Has anyone got an idea how this can be done properly? cheers, visitor [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted September 4, 2011 Share Posted September 4, 2011 I am not sure what you mean with label a button, but if you want to set your own background image to a submit button (which is independent of javascript) try the following: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title></title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> .fancybutton{ display:block; /* use inline block if you want it to behave inline */ width:116px; height:21px; border:none; cursor:pointer; /* little hand to show it's a button */ background: url('round_corner.gif') no-repeat; } </style> </head> <body> <form action="" method="post"> <input type="submit" name="submit" class="fancybutton"/> </form> </body> </html> notice I gave submit a class and in css I set the properties for it instead of in the html itself. That way you separate concerns. Ones you played with this and want a something more advanced, like a stretching button. Google for css sliding doors. -edit: if you also validate your html/css most basic errors can easily be fixed Quote Link to comment Share on other sites More sharing options...
visitor Posted September 4, 2011 Author Share Posted September 4, 2011 Great! Thank you very much cssfreakie, I really appreciate your help! visitor Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted September 4, 2011 Share Posted September 4, 2011 Great! Thank you very much cssfreakie, I really appreciate your help! visitor Before I forget. <input> is an inline element, to give it dimensions other than by adding a value. You need to display it block or inline-block. Ones you've done that you can style it the way you want. So that is what i did in the example given above. good luck! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.