Проблема CSS или jQuery: веб-сайт работает неправильно

Question

Перейти к этой бета-версии моего нового сайта (link redacted). Если вы наведите курсор мыши на один из цветных квадратов, появится всплывающее окно à la Panic's Coda, за исключением двух проблем:

а) Текст внутри всплывающего окна не отображается. Программно устанавливается на :) с использованием следующего кода:

http://grab.by/syM http://grab.by/syM

$('td.middle', this).text(':)');

td.middle - это класс средней ячейки
this является ссылкой на $('.info').each()

Используйте, возможно, захотите использовать инструмент инспектора, такой как Firebug для Firefox или тот, который включен в Safari или Google Chrome.

б) Стороны обрезаны:

http://grab.by/syE http://grab.by/syE

Я думаю, что это связано с:
http://grab.by/syW http://grab.by/syW

По какой-то причине стороны вычислили width с 1px, в отличие от

.bubbleInfo .popup td.corner {
 position: inherit;
 height: 15px;
 width: 19px;
}

19 пикселей, как определено в (link redacted)

---

Вы можете получить ZIP-архив со всеми файлами здесь (link redacted).

Большое спасибо. Я знаю, это много, чтобы спросить.

Answer 1

Ширина контейнера div для таблицы :) обрезает стороны всплывающего окна :). Если вы измените ширину класса .info с 32 до чего-то большего (я сделал width:80px), вы увидите все всплывающее окно. Кроме того, вы можете изменить ширину (или минимальную ширину) .popup примерно до 50px, что исправляет их, не искажая размер цветных блоков.

Что касается отсутствия :), я смог заставить его появиться, установив text-indent:0 в классе .middle. Это не оказало вредного влияния на FireFox и исправило его в Chrome.