I am using jQuery layout to create the cantonese input page. When I added the periodic table for inputing elements in Chinese as well as family relative’s calling characters, I experience various hickups when using internet explorer. The other browsers like firefox and chrome do not have the problem and is very consistent.

Here is the first shot, everything looks good:

Display according to the design. Works good

Here is the problem shown with a different page but design components are all the same:

Problem occurs in internet explorer but not other browsers

In here, the hover element style with white forground and dark background works only when the border size is increased to 3px but the div displayed is clipped with z-index problem.

Another problem occurs with internet explorer

However in this webpage, the displayed div does not clipped and shown normally.

Partly works in internet explorer

The top works with hover style changed but it does not work for the other:

Does not work for the top element in internet explorer

With the other table, the span element can show hover effect only with jQuery and using CSS alone failed in internet explorer:

mouseover works with jQuery but not in CSS for internet explorer

I am very pissed with internet explorer after finding all these problems.