(Note: I stored these locally as 'button_left.gif', 'button_middle.gif' and 'button_right.gif')
Then create a borderless table with these images as background, and put the desired content (text and/or images such as this random icon.gif) in the middle.
Below is what I got so far. Three questions:
- Am I on the right track, or should I do this completely differently? (e.g. no tables at all, and just div/span or something?)
- On Firefox and Opera, it looks OK. On IE6, there's two white bars in the button. How do I fix that?
- Is there a way to not make the table break to a new line? I.e. could I put this button thing somewhere between regular text?
Thanks a lot in advance!
Here's my current HTML:
Expand|Select|Wrap|Line Numbers
- <html><head>
- <style type="text/css">
- <!--
- a { text-decoration: none; }
- table { border-spacing: 0; }
- td.ButtonMain { vertical-align: center; font-family: Arial; font-weight: bold; color: #ffffff; }
- img.ButtonImg { border: 0; vertical-align: middle; }
- -->
- </style>
- </head>
- <body text='#000000' bgcolor='#ffffff'>
- <a href='some/other/page'>
- <table><tr class='ButtonRow' height='68px'>
- <td background='button_left.gif' width='36px'></td>
- <td background='button_middle.gif' class='ButtonMain'>
- <img src='icon.gif' class='ButtonImg'> Click here for something wonderful to happen!
- </td>
- <td background='button_right.gif' width='36px'></td>
- </tr></table>
- </a>
- </body></html>