Problem Splicing Image and Applying to a table


I created a nav bar for the top of my site in Photoshop.  The problem is, now I'm trying to splice the image up and put it back together in a table, so it looks like it originally did, and I can apply links, mouseovers... to each individual part of the bar.

The problem I'm running into is that i can't get all of the pieces back together using tables.  Not all of the columns are the same size, and I'm ending up with whitespace.

Am I doing something wrong?  Could I possible use CSS to get this to work how I want it to?  Can someone point me in the right directions (without using the term image-map (ugh) :)) Thanks!

Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

What version of Photoshop? 5.0 and above ship with ImageReady -- use that. It will generate the HTML for you, and everything will line up nice and neat.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Make sure that you have your table set to cellpadding="0" and cellspacing="0"

Can you give us a URL to see what is happening...we can help better that way.
You can not have rows spanning and cols spanning in the same rows and or columns as each other.  Sort of.  Kind of like having a column spanned across two rows and another spanning two rows starting on the same row as the second row of the first span.  Not making much sense here I am sure.

* * * * * *
*** *******
* * * * * *
******* ***
* * * * * *

If the layout above renders properly then it is something like above.  If I remember rightly.

Whatever the case, put a border on your table and see where it is messing up.  It may require cutting your image more and putting the same link on multiple cells.
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Nope, didn't render how I hoped.  Need to set it to monospace font.  Anyway, be careful how you have colspan and rowspan organised in your table.
Along with cellpadding="0" and cellspacing="0" put border="0" since it gives problem in Netscape if you don't do so ........

I'll go along with webwoman....ImageReady is THE way to go....the table code might be a bit messy, but everything will look great.

Personally, for splicing I prefer Macromedia's Fireworks.
I prefer Fireworks too, but it was stated that they were using Photoshop, and since it's there...

Would you like to explain why a C grade though?
NJordan72Author Commented:
Well it wasn't really the solution to my problem I was looking for.  I wasn't using a newer version of photoshop, and did not have ImageReady on my computer.  I was looking more for some CSS pointers then a product to use.  Luckily I knew somebody with Photoshop 6.  I did use some of the code it produced, but mostly just to learn about some CSS stuff I had never used before, and then I rewrote everything by hand.  Thanks though!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today

From novice to tech pro — start learning today.