название не придумал. Чуть подправит css

[Гробовщик]

Доброго времени суток. В css я новичок, и даже фантазия плохо работает. Зашёл в тупик. Есть код (местами скопипастеный):
1. Когда я навожу на кнопку, то таблица начинает двигаться (рамочка раздвигает границу), как ей это запретить?
2. Не могу вставить больше 6-ти смайликов, и не понимаю почему. Где запрет?

.b:hover {
background: #BFEFFF; /* Цвет фона под ссылкой */
cursor: pointer;
border: 4px double black; /* Параметры границы */
}
.i:hover {
background: #BFEFFF; /* Цвет фона под ссылкой */
cursor: pointer;
border: 4px double black; /* Параметры границы */
}
.u:hover {
background: #BFEFFF; /* Цвет фона под ссылкой */
cursor: pointer;
border: 4px double black; /* Параметры границы */
}
.s:hover {
background: #BFEFFF; /* Цвет фона под ссылкой */
cursor: pointer;
border: 4px double black; /* Параметры границы */
}
.hiper:hover {
background: #BFEFFF; /* Цвет фона под ссылкой */
cursor: pointer;
border: 4px double black; /* Параметры границы */
}
.image:hover {
background: #BFEFFF; /* Цвет фона под ссылкой */
cursor: pointer;
border: 4px double black; /* Параметры границы */
}
.spis:hover {
background: #BFEFFF; /* Цвет фона под ссылкой */
cursor: pointer;
border: 4px double black; /* Параметры границы */
}
.num:hover {
background: #BFEFFF; /* Цвет фона под ссылкой */
cursor: pointer;
border: 4px double black; /* Параметры границы */
}
.smile:hover {
background: #BFEFFF; /* Цвет фона под ссылкой */
cursor: pointer;
}
/* смайлики*/
.smile-button {
/* */ position: absolute;
width: 20px;
height: 20px;
}
.smile-button .smile-open, .smile-button .smile-close {
background: url('/img/tag/im_smile_cross.png') no-repeat -2px -26px;
position: absolute;
opacity: 1;
width: 100%;
height: 100%;

-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);

-webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s ease;
-moz-transition: -moz-transform 0.3s ease, opacity 0.3s ease;
-ms-transition: -ms-transform 0.3s ease, opacity 0.3s ease;
-o-transition: -o-transform 0.3s ease, opacity 0.3s ease;
transition: transform 0.3s ease, opacity 0.3s ease;

outline: 0;
}
.smile-button .smile-close {
opacity: 0;
background-position: -2px -2px;
}
.smile-button:focus .smile-close {
z-index: 1;
opacity: 1;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.smile-button:focus .smile-open {
opacity: 0;
}
.smile-button .smile-box {
display: none;
position: absolute;
opacity: 0;
bottom: 100%;
left: -90px;
color: #fff;
border-radius: 5px;
width: 200px;
height: 100px;
background: #000;
margin-bottom: 10px;
outline: 0;
-webkit-transition: opacity 0.3s ease, margin-bottom 0.3s ease;
-moz-transition: opacity 0.3s ease, margin-bottom 0.3s ease;
-ms-transition: opacity 0.3s ease, margin-bottom 0.3s ease;
-o-transition: opacity 0.3s ease, margin-bottom 0.3s ease;
transition: opacity 0.3s ease, margin-bottom 0.3s ease;
}
.smile-button .smile-box:after {
content: ' ';
position: absolute;
top: 100%;
left: 50%;
width: 0;
height: 0;
margin-left: -5px;
border-top: 5px solid #000;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 0;
}
.smile-button:focus .smile-box {
display: block;
opacity: 0.8;
margin-bottom: 5px;
}
.smile-button .smile-box .smile-box-wrapper {
padding: 10px;
}
.smile-button .smile-box .smile-box-wrapper .smile1,
.smile-button .smile-box .smile-box-wrapper .smile2,
.smile-button .smile-box .smile-box-wrapper .smile3,
.smile-button .smile-box .smile-box-wrapper .smile4,
.smile-button .smile-box .smile-box-wrapper .smile5
.smile-button .smile-box .smile-box-wrapper .smile6,
.smile-button .smile-box .smile-box-wrapper .smile7,
.smile-button .smile-box .smile-box-wrapper .smile8 {
display: inline-block;
width: 20px;
height: 20px;
margin: 3px;
}
.smile-button .smile-box .smile-box-wrapper .smile1 {
background: url('http://javascript.ru/forum/images/smilies/smile.gif') no-repeat 0 0;
}
.smile-button .smile-box .smile-box-wrapper .smile2 {
background: url('http://javascript.ru/forum/images/smilies/blink.gif') no-repeat 0 0;
}
.smile-button .smile-box .smile-box-wrapper .smile3 {
background: url('http://javascript.ru/forum/images/smilies/laugh.gif') no-repeat 0 0;
}
.smile-button .smile-box .smile-box-wrapper .smile4 {
background: url('http://javascript.ru/forum/images/smilies/unsure.gif') no-repeat 0 0;
}
.smile-button .smile-box .smile-box-wrapper .smile5 {
background: url('http://javascript.ru/forum/images/smilies/tongue.gif') no-repeat 0 0;
}
.smile-button .smile-box .smile-box-wrapper .smile6 {
background: url('http://javascript.ru/forum/images/smilies/tongue.gif') no-repeat 0 0;
}
.smile-button .smile-box .smile-box-wrapper .smile7 {
background: url('http://javascript.ru/forum/images/smilies/tongue.gif') no-repeat 0 0;
}
.smile-button .smile-box .smile-box-wrapper .smile8 {
background: url('http://javascript.ru/forum/images/smilies/tongue.gif') no-repeat 0 0;
}


<td>
<img class="b" style="margin-left: 0px;" src="/img/tag/bold.gif" alt="" height="20" width="21">
<img class="b" style="margin-left: -5px;" src="/img/tag/italic.gif" alt="" height="20" width="21">
<img class="b" style="margin-left: -5px;" src="/img/tag/underline.gif" alt="" height="20" width="21">
<img class="b" style="margin-left: -5px;" src="/img/tag/strikethrough.gif" alt="" height="20" width="21">
<img class="b" style="margin-left: -5px;" src="/img/tag/createlink.gif" alt="" height="20" width="21">
<img class="b" style="margin-left: -5px;" src="/img/tag/insertimage.gif" alt="" height="20" width="21">
<img class="b" style="margin-left: -4px;" src="/img/tag/spis.gif" alt="" height="20" width="21">
<img class="b" style="margin-left: -4px;" src="/img/tag/num.gif" alt="" height="20" width="21">
<span class="smile-button" tabindex="1">
<div class="smile-box">
<div class="smile-box-wrapper">
<a class="smile1" href="#"></a>
<a class="smile2" href="#"></a>
<a class="smile3" href="#"></a>
<a class="smile4" href="#"></a>
<a class="smile5" href="#"></a>
<a class="smile6" href="#"></a>
<a class="smile7" href="#"></a>
<a class="smile8" href="#"></a>
</div>
</div>
<div class="smile-close" tabindex="2"></div>
<div class="smile-open"></div>
</span>
</td>

[danik.js]

Чтоб ширина элементов не менялась можешь изначально установить прозрачный бордер, по ховеру просто цвет менять. Либо вместо прозрачного бордера - margin. Или использовать outline.
Второй вопрос не понял. Куда смотреть? Сделай предпросмотр.

[Гробовщик]

danik.js,
Чтоб ширина элементов не менялась можешь изначально установить прозрачный бордер, по ховеру просто цвет менять. Либо вместо прозрачного бордера - margin. Или использовать outline.
К сожалению такие попытки были, всё равно видно как строки ниже (textarea там) ёрзают, такого бы не хотелось. margin-top помог, но только если вешать на одну картинку, тогда она получается чуть ниже остальных, но ничего не ёрзает(((
Визуально как то так, разумеется оптимизирована для этого вывода, просто что бы был понятен основной смысл... Когда нажимается кнопка смайликов (она отличается от других), появляется меню со смайликами, только вот я пытаюсь поставить 8 смайликов (или больше), а он больше 6-ти не выводит, почему так?

<style>
.b:hover {
background: #BFEFFF;
cursor: pointer;
border: 4px double black;
}
.i:hover {
background: #BFEFFF;
cursor: pointer;
border: 4px double black;
}
.u:hover {
background: #BFEFFF;
cursor: pointer;
border: 4px double black;
}
.s:hover {
background: #BFEFFF;
cursor: pointer;
border: 4px double black;
}
.hiper:hover {
background: #BFEFFF;
cursor: pointer;
border: 4px double black;
}
.image:hover {
background: #BFEFFF;
cursor: pointer;
border: 4px double black;
}
.spis:hover {
background: #BFEFFF;
cursor: pointer;
border: 4px double black;
}
.num:hover {
background: #BFEFFF;
cursor: pointer;
border: 4px double black;
}
.smile:hover {
background: #BFEFFF;
cursor: pointer;
}
/* смайлики*/
.smile-button {
position: absolute;
width: 20px;
height: 20px;
}
.smile-button .smile-open, .smile-button .smile-close {
background: url('http://st0.vk.me/images/im_smile_cross.png?3') no-repeat -2px -26px;
position: absolute;
opacity: 1;
width: 100%;
height: 100%;

-webkit-transform: rotate(0);
-moz-transform: rotate(0);
-ms-transform: rotate(0);
-o-transform: rotate(0);
transform: rotate(0);

-webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s ease;
-moz-transition: -moz-transform 0.3s ease, opacity 0.3s ease;
-ms-transition: -ms-transform 0.3s ease, opacity 0.3s ease;
-o-transition: -o-transform 0.3s ease, opacity 0.3s ease;
transition: transform 0.3s ease, opacity 0.3s ease;

outline: 0;
}
.smile-button .smile-close {
opacity: 0;
background-position: -2px -2px;
}
.smile-button:focus .smile-close {
z-index: 1;
opacity: 1;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.smile-button:focus .smile-open {
opacity: 0;
}
.smile-button .smile-box {
display: none;
position: absolute;
opacity: 0;
bottom: -500%;
left: 90px;
color: #fff;
border-radius: 5px;
width: 200px;
height: 100px;
background: #000;
margin-bottom: 10px;
outline: 0;
-webkit-transition: opacity 0.3s ease, margin-bottom 0.3s ease;
-moz-transition: opacity 0.3s ease, margin-bottom 0.3s ease;
-ms-transition: opacity 0.3s ease, margin-bottom 0.3s ease;
-o-transition: opacity 0.3s ease, margin-bottom 0.3s ease;
transition: opacity 0.3s ease, margin-bottom 0.3s ease;
}
.smile-button .smile-box:after {
content: ' ';
position: absolute;
top: 100%;
left: 50%;
width: 0;
height: 0;
margin-left: -5px;
border-top: 5px solid #000;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 0;
}
.smile-button:focus .smile-box {
display: block;
opacity: 0.8;
margin-bottom: 5px;
}
.smile-button .smile-box .smile-box-wrapper {
padding: 10px;
}
.smile-button .smile-box .smile-box-wrapper .smile1,
.smile-button .smile-box .smile-box-wrapper .smile2,
.smile-button .smile-box .smile-box-wrapper .smile3,
.smile-button .smile-box .smile-box-wrapper .smile4,
.smile-button .smile-box .smile-box-wrapper .smile5
.smile-button .smile-box .smile-box-wrapper .smile6,
.smile-button .smile-box .smile-box-wrapper .smile7,
.smile-button .smile-box .smile-box-wrapper .smile8 {
display: inline-block;
width: 20px;
height: 20px;
margin: 3px;
}
.smile-button .smile-box .smile-box-wrapper .smile1 {
background: url('http://javascript.ru/forum/images/smilies/smile.gif') no-repeat 0 0;
}
.smile-button .smile-box .smile-box-wrapper .smile2 {
background: url('http://javascript.ru/forum/images/smilies/blink.gif') no-repeat 0 0;
}
.smile-button .smile-box .smile-box-wrapper .smile3 {
background: url('http://javascript.ru/forum/images/smilies/laugh.gif') no-repeat 0 0;
}
.smile-button .smile-box .smile-box-wrapper .smile4 {
background: url('http://javascript.ru/forum/images/smilies/unsure.gif') no-repeat 0 0;
}
.smile-button .smile-box .smile-box-wrapper .smile5 {
background: url('http://javascript.ru/forum/images/smilies/tongue.gif') no-repeat 0 0;
}
.smile-button .smile-box .smile-box-wrapper .smile6 {
background: url('http://javascript.ru/forum/images/smilies/tongue.gif') no-repeat 0 0;
}
.smile-button .smile-box .smile-box-wrapper .smile7 {
background: url('http://javascript.ru/forum/images/smilies/tongue.gif') no-repeat 0 0;
}
.smile-button .smile-box .smile-box-wrapper .smile8 {
background: url('http://javascript.ru/forum/images/smilies/tongue.gif') no-repeat 0 0;
}
</style>
<table border="1" width="100%">
<tr>
<td>
<img class="b" style="margin-left: 0px;" src="http://javascript.ru/forum/images/smilies/help.gif" alt="" height="20" width="21">
<img class="b" style="margin-left: -5px;" src="http://javascript.ru/forum/images/smilies/help.gif" alt="" height="20" width="21">
<img class="b" style="margin-left: -5px;" src="http://javascript.ru/forum/images/smilies/help.gif" alt="" height="20" width="21">
<img class="b" style="margin-left: -5px;" src="http://javascript.ru/forum/images/smilies/help.gif" alt="" height="20" width="21">
<img class="b" style="margin-left: -5px;" src="http://javascript.ru/forum/images/smilies/help.gif" alt="" height="20" width="21">
<img class="b" style="margin-left: -5px;" src="http://javascript.ru/forum/images/smilies/help.gif" alt="" height="20" width="21">
<img class="b" style="margin-left: -4px;" src="http://javascript.ru/forum/images/smilies/help.gif" alt="" height="20" width="21">
<img class="b" style="margin-left: -4px;" src="http://javascript.ru/forum/images/smilies/help.gif" alt="" height="20" width="21">
<span class="smile-button" tabindex="1">
<div class="smile-box">
<div class="smile-box-wrapper">
<a class="smile1" href="#"></a>
<a class="smile2" href="#"></a>
<a class="smile3" href="#"></a>
<a class="smile4" href="#"></a>
<a class="smile5" href="#"></a>
<a class="smile6" href="#"></a>
<a class="smile7" href="#"></a>
<a class="smile8" href="#"></a>
</div>
</div>
<div class="smile-close" tabindex="2"></div>
<div class="smile-open"></div>
</span>
</td>
</tr>
</table>

[danik.js]

Ой ты чудик. Как же они не будут ерзать если изначально они впритык, а бордеру же где-то нужно разместиться? Об этом не подумал?
Прозрачный бордер работает нормально. Или margin, но у тебя там в коде зачем-то разный margin для разных картинок прописан. зачем - хз

[Гробовщик]

danik.js,
Да знаю что чудик, но как я не старался из отодвинуть, или убрать рамку, объекты всё равно ёрзают, у меня очень туго со стилями, да и код полуоформленый с элементами проб и ошибок

[Deff]

Добавить красным
<table border="1" width="100%" height="38">
<tr valign="bottom">