Пробелы между кнопками из-за границ.

[Faradei]

В общем вот такая у меня шапка с навигацией.

Как видно пробелы между кнопками. Это таблица по сути, со столбцами.

Вот код:

<table>
<tr align="center">
<td width="173"></td>
<td><a href="main.html" class="left">Главная<span>Главная</span></a></td>
<td><a href="work.html" class="center">Наши работы<span>Наши работы</span></a></td>
<td><a href="materialsandcolors.html" class="center">Материалы и цвета<span>Материалы и цвета</span></a></td>
<td><a href="contacts.html" class="center">Контакты<span>Контакты</span></a></td>
<td><a href="services.html" class="center">Наши услуги<span>Наши услуги</span></a></td>
<td><a href="plotter.html" class="right">Плоттерная резка<span>Плоттерная резка</span></a></td>
<td width="168"></td>
</tr>
</table>

А вот стили, которые применяются к таблице, ну и вообще ко всему сайту:

   body {
   background-image: url(carbon.jpg);
   background-attachment: fixed;
   background-size: cover;
   }

}
   #leftbar {
   float: left; 
   width: 167px; 
   height: 100%; 
   background: white;
   border-radius: 5px;
}

table {
   border-style: none;
   border-collapse: collapse;
}
   #content {
   padding: 5px 40px;
   width: 900px;
   margin-left: 137px;
   height: 100%;
   background: white;
   border-radius: 5px;
   position: relative;
}
   #top {
   width: 970px;
   bottom: 0px;
   left: 0px;
   right: 0px;
   position: absolute;
   background: #cccccc;
   border-radius: 0px 0px 5px 5px;
   padding: 5px;
}
   h1 {
   font-family: Tahoma;
   font-size: 16pt;
}
   h2 {
   font-family: Tahoma;
   font-size: 14pt;
}
   p {
   font-family: Tahoma;
   font-size: 12pt;
}
   td.strela:hover {
   background: url(strela.png);
}
   td.strela {
   background: white;
}

.left {
   display: inline-block;
   position: relative;
   width: 150px;
   height: 40px;
   background: transparent url(knopkaleft.png) no-repeat;
   font-family: tahoma;
   font-size: 12pt;
   padding-top: 7px;

}
.left span {
   position: absolute;
   top: 0; left: 0; bottom: 0; right: 0;
   background: transparent url(knopkaleft.png) no-repeat;
   background-position: -150px 0;
   opacity: 0;
   width: 150px;
   -webkit-transition: opacity 0.5s;
   -moz-transition: opacity 0.5s;
   -o-transition: opacity 0.5s;
   padding-top: 7px;
}

   .left:hover span {
   opacity: 1;
}
   .center {
   display: inline-block;
   position: relative;
   width: 150px;
   height: 40px;
   background: transparent url(knopkacenter.png) no-repeat;
   background-size: auto;
   font-family: tahoma;
   font-size: 12pt;
   padding-top: 7px;
}
   .center span {
   position: absolute;
   top: 0; left: 0; bottom: 0; right: 0;
   background: transparent url(knopkacenter.png) no-repeat;
   background-position: -150px 0;
   opacity: 0;
   width: 150px;
   -webkit-transition: opacity 0.5s;
   -moz-transition: opacity 0.5s;
   -o-transition: opacity 0.5s;
   padding-top: 7px;
}

   .center:hover span {
   opacity: 1;
}
   .right {
   display: inline-block;
   position: relative;
   width: 150px;
   height: 40px;
   background: transparent url(knopkaright.png) no-repeat;
   font-family: tahoma;
   font-size: 12pt;
   padding-top: 7px;
}
   .right span {
   position: absolute;
   top: 0; left: 0; bottom: 0; right: 0;
   background: transparent url(knopkaright.png) no-repeat;
   background-position: -150px 0;
   opacity: 0;
   width: 150px;
   -webkit-transition: opacity 0.5s;
   -moz-transition: opacity 0.5s;
   -o-transition: opacity 0.5s;
   padding-top: 7px;
}

   .right:hover span {
   opacity: 1;
}
   a { 
    text-decoration: none; 
   }
   a:hover { 
    text-decoration: none; 
}

В общем пробовал много, ничего не помогает (border-style, collapse, spacing). Прошу помочь, а то сам не догоняю .

Edited November 16, 2011 by Faradei

[Mr.Black]

Попробуй полностю обнулить стили.....

/* ————— reset.css ————— */
html, body, div, a, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center,  dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; outline: 0; border: 0; vertical-align: baseline; background: transparent; font-size: 100%; } table { border-collapse: collapse; border-spacing: 0; } td, td img { vertical-align: top; }  input, select, button, textarea { margin: 0; padding: 0; font-size: 100%; } input[type="checkbox"] { vertical-align: bottom; } input[type="radio"] { vertical-align: text-bottom; } ins { text-decoration: none; } del { text-decoration: line-through; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
/* ————— /reset.css ————— */

Если не поможет и есть psd, скинь мне в личку, попробую ближе к вечеру на списках сделать.

и еще доктайп какой?

[Softlink]

<table cellspacing="0">

или

table {
   border-style: none;
   border-spacing: 0px;
}

[Faradei]

Доктайп не указывал. css и html только. Раньше границы были нормальными, когда фоновая картинка не менялась. Потом решил плавное меню сделать и в итоге вот так получилось.

[Mr.Black]

укажи на всякий случай доктайп

[Softlink]

Доктайп не указывал.

укажи на всякий случай доктайп

На всякий случай?)) Как бы его наличие вообще не должно обсуждаться.

[Faradei]

При вот этом вот коде

table {
   border-style: none;
   border-spacing: 0px;
}

чуть пробел уменьшился. Но остался. У меня так было уже, я изменял ширину столбцов, изменял координаты фонового изображения. Но все равно тоже ничего не помогало.

[Softlink]

Faradei,

1) http://forum.htmlbook.ru/index.php?showtopic=30714&view=findpost&p=234087

2) если ничего не помогает, давайте ссылку на страницу.

[Faradei]

доктайп не помог...

[Justnewone]

display: inline-block;

похоже тут беда, делайте отриц. маргин на .25-.3 em, или в пикселях на глаз.

[Softlink]

display: inline-block;

похоже тут беда, делайте отриц. маргин на .25-.3 em, или в пикселях на глаз.

Да вроде бы не должно быть из-за него. Попробуйте еще ячейками обнулить паддинги.

[Faradei]

Faradei,

1) http://forum.htmlbook.ru/index.php?showtopic=30714&view=findpost&p=234087

2) если ничего не помогает, давайте ссылку на страницу.

У меня страница не в интернете, я только разрабатываю ее. Залил здесь

VirusTotal

Edited November 16, 2011 by Faradei

[Justnewone]

Не не, выложите на халявный хостинг, я ничего скачивать себе не буду.

[Softlink]

Faradei,

1) http://forum.htmlbook.ru/index.php?showtopic=30714&view=findpost&p=234087

2) если ничего не помогает, давайте ссылку на страницу.

У меня страница не в интернете, я только разрабатываю ее. Залил здесь

VirusTotal

td{
padding:0;
}

и заработает как надо.

И про доктайп не надо забывать, ага

[Faradei]

Спасибо, маргин помог . Только придется для каждой кнопки свой стиль создавать, но ничего зато все норм =)

Faradei,

1) http://forum.htmlbook.ru/index.php?showtopic=30714&view=findpost&p=234087

2) если ничего не помогает, давайте ссылку на страницу.

У меня страница не в интернете, я только разрабатываю ее. Залил здесь

VirusTotal

td{
padding:0;
}

и заработает как надо.

И про доктайп не надо забывать, ага

padding тоже поставил и доктайп) все норм