CS4 Fireworks Image appears split up when viewed in IE, FireFox or inserted into Dreamweaver

Question

I am working on my job's webiste (and I'm not a web developer) and I created this menu using fireworks here is how it appears in fireworks:
However when I view it in IE, FireFox or try inserting it on to a page in Dream wever it looks like this:
I have have played around with the different file types to save it as and nothing seems to work. Can someone please help me out?

Answer 1

When you export as HTML, you get a rigid table, but all your images are different widths. To produce this result, Fireworks has to make a very complex table. It's like making a jigsaw puzzle out of rectangular bits. Fireworks is not really a code-writing program and the table code required to emulate what you have would make me tear my hair out if I had to do it. Hardly anything lines up!
So... Make all your slices the same width. Or, if you really have to, pull two or three guidelines in from the ruler on the left (and also horizontal guidelines down from the top to separate your images vertically). Then, draw your slices over whole areas defined by the guidelines. Then, when Fireworks creates the jigsaw puzzle, all the pieces have edges that align. The code is much simpler and is less likely to break.
The better way would be to not use Fireworks code at all, though. Create images just from the areas you need, make sure you have the same number of pixels above and below each unit of text. Then, in Dreamweaver, set a background color to match the background color of your images and then put them in using a div (or even a table). Dreamweaver is good for coding, Fireworks is not.