I'm trying to create a graphical button with custom images and text on it. My approach was to split the generic button image into 3 parts:

(The img tag doesn't seem to work (?) so here are links to the 3 images)
button_left.gif - button_middle.gif - 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:

  1. Am I on the right track, or should I do this completely differently?
  2. On Firefox and Opera, it looks OK. On IE6, there's two white bars in the button. How do I fix that?
  3. 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:


<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; }

<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 background='button_right.gif' width='36px'></td>


Okay, firstly, to fix the white lines in IE, I believe you'd need to add the following to your css stylesheet for the button table.

table {
[INDENT]border-collapse: collapse;[/INDENT]

Secondly, I think you're going about this the wrong way. The use of background images are correct, but not the table. Have a look at the following link, as I think that will answer your questions.