Published by Pui-chor on 19 May 2012

Crazy Internet Explorer behaviour!

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.

Published by Pui-chor on 19 Mar 2012

With or without DOCTYPE

Usering Internet Explorer, there is a difference with or without DOCTYPE declaration on HTML:

Without DOCTYPE declaration

And with DOCTYPE declaration:

Withe the DOCTYPE declaration

 

Published by Pui-chor on 10 Mar 2012

z-index problem again

One of the layout for my cantonese input is behaving differently when the drop down box is shown. It is found to have a problem when the mouse over the list moves to the position where the zero-clipboard button is located and it does interferring with the drop box. When the drop box appears and covering the buttons, I am moving the mouse down the list and just when it went over the item which is supposed to be on the top of the button, the list disappeared and inhibit the selection of the list item after. This behaviour is weird as the list has z-index higher and so it does cover the button but the mouseover on the button is taking effect to make the list disappear and this does not happen in other layout pages.

I have to move the button away from the list and the problem is solved.

I have no idea why the z-index set up failed and have no idea to fix up the problem. Good grief. It does not have the same problem in other pages.

- Next »