CSS or jQuery problem: Website not behaving correctly.

Question

Go to this beta of my new website (link redacted). If you hover over one of the colored squares, a popup box à la Panic's Coda pops up, except there are two problems:

a) The text inside the popup does not show up. It is programmatically set to :) using the following code:

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

     td.middle is the class of the middle cell
     this is a reference to $('.info').each()

Use may want to use an inspector tool like Firebug for Firefox or the one included one in Safari or Google Chrome.

b) The sides are clipped off:

I think it is due to this:

For some reason, the sides have computed widths of 1px, as opposed to

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

19px as defined in (link redacted)

---

You can grab a ZIP archive of all the files here (link redacted).

Thanks so much. I know this is a lot to ask.

Answer 1

The width of the container div for the :) table is clipping the sides of the :) table popup. If you edit the width of the .info class up from 32 to something bigger (I did width:80px) you see the whole popup. Alternately, you can change the width (or min-width) of .popup to about 50px, which fixes them without distorting the size of the colored boxes.

As for the :) being missing, I was able to make it appear by setting text-indent:0 in the .middle class. This had no ill effects on FireFox and fixed it in Chrome.