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] Link to comment https://forums.phpfreaks.com/topic/246409-to-label-a-button/ 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 Link to comment https://forums.phpfreaks.com/topic/246409-to-label-a-button/#findComment-1265334 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 Link to comment https://forums.phpfreaks.com/topic/246409-to-label-a-button/#findComment-1265335 Share on other sites More sharing options...
cssfreakie Posted September 4, 2011 Share Posted September 4, 2011 Quote 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! Link to comment https://forums.phpfreaks.com/topic/246409-to-label-a-button/#findComment-1265337 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.