Create a graphical button with img and text?

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:

(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:

1. 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?)
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:

re: Create a graphical button with img and text?

I was just going to write a sample code, but made a quick google search and found this nice tutorial:

How to make sexy buttons with CSS

I hope you like it.

re: Create a graphical button with img and text?

hi Bram2,

you are in right way for implementation. you can use CSS with div but that need a lot more coding and its a lot of fuss. right now your implementation is pretty neet.

For fixing the bars on you can make the border of the table to be ZERO and use CSS "border-collapse:collapse " property to make the border collapse..

yes there is a way to make table to be in same line in the "td" of the random text use nowrap="nowrap" .. this is an HTML property for "td" to not break the content to new line...

enjoy brother... happy coding