Headerbar, images wont touch eachother ><

Hi

I'm trying to make a custom headerbar but the images wont touch eachother

Heres the site

http://www.importwerks.com/catalog

When i had rectagular boxes they were connected but they wont seem to connect when i have the diagonnaly cut boxes.

Heres the code for the table








EDIT: When i posted code tags, the actual pictures showed up

how could they line up? you can't like slide or put picture together via HTML without using special layering/positioning... I would cut a strait line right before the words to make them fit...


Did that make any sense? Sorry, long day at work... =/

[QUOTE=Doolittle]how could they line up? you can't like slide or put picture together via HTML without using special layering/positioning... I would cut a strait line right before the words to make them fit...


Did that make any sense? Sorry, long day at work... =/[/QUOTE]


Ya it made sense

Cutting a straight line is a fine solution but then there would be that small portion in every button where clicking inside it would take you to the link of the button next to it.

I think what Doolittle meant, was to make your images rectangular. I can't see a diagonal border between the images themselves, correct me if I'm wrong. I ran into a similar situation a few years ago, and I just hoped and prayed that nobody clicked on those small areas. That's not a solution of course. Your other option would be to use a gif with a polygonal image map.

http://superfluousbanter.org/archives/000186.php

What is happening is that your images are transparent gifs with transparency, so your images ARE technically lining up correctly

1) How you sliced images

Another way to approach the problem, other than the way dek showed, is to simplify the problem and slice your images mid-diagonal

2) Simply your slicing

Yet another way would be to just treat the whole nav bar as a background image for a table, and either place the letters for the buttons as