CSS tabs problem

Hi all!
I have a site where I would like to add a tab menu on the top. I used the folliwing CSS code:

ul.tabs { border:1px solid #194367; height: 20px; width: 520px; margin: 0; padding: 0; background:#C0D9DE; overflow:hidden; }
ul.tabs li { float: left; background-image: url(tab.gif); display:inline; width: 82px; height: 20px; margin: 0px; padding: 0px; text-align: right; }

but when I create 3 tabs into the ul tag (using li) there is a space between them. I would like to remove this, so tabs will be close to each other. is it due to the fact that li tags try to fill all the space inside the ul?
Any help to solve this would be appreciated.

 

Without seeing your page, the best I can tell you is that the space you're seeing is probably the default styling being applied to the links (give them display: block; height: 1%; and see what happens).

What does your page look like?

 

My code now is:

ul.tabs {border:1px solid #194367; height: 20px; width: 520px; margin: 0; padding: 0; background:#C0D9DE; overflow:hidden; }
ul.tabs li { float: left; background-image: url(tab.gif); display:inline; width: 82px; height: 20px; margin: 0px; padding: 0px; text-align: right; }
ul.tabs a:hover, ul.tabs a.tab-active { text-decoration: none;}
ul.tabs a { text-decoration: none; font-weight:bold; margin: 0; padding: 0; color:#2B4353; }

HTML:

And I still have the same problem...

 

Can you show me the page? If I can see the page I should be able to tell you what's wrong and how to fix it. Especially since there's always the possibility that code elsewhere could be causing the problem you're seeing (or at least contributing to it).

 

I've sent you a PM

 

Anyone else?

 

Don't give up hope so quickly. I got side-tracked by a prospective client.

 

I'm still facing the same problem, I also tried to change a bit of code but I'm still stuck. The page is here