padding + height problem on Firefox

I though I was facing an error on Firefox browser when using padding & height attributes together in a CSS class. But I was error, in the end, it is still IE browser problem.

Let take an example "height_without_doctype.html"

When we run this code, it will display different output on Firefox & IE.

Firefox height = padding-top + height = 50px + 50px = 100px

IE height = height = 50px

After I find Mr Google, it point me to this url which is perfectly solve my above problem.

The solution is simple, just add in a DOC type, then IE will follow a common standard same as Firefox.

So, the code changed to "height_with_doctype.html"

Both browsers work the same now.

Javascript Menu Navigation

Recently I research on how to implement a javascript menu navigation. At the beginning, I was thinking of use library to make one. But there are so many different request coming in until I decided to develop my own javascript menu navigation.

Here is the sample code that I write (3 levels menu navigation):

During testing on this sample code, I find out that IE6 having some different behavior then IE7 & Firefox on onmouseout() function. If possible, avoid to use that function.

XML DOM

I really want to fuck off this thing, facing too much problem on it, finally fully understand it now.

Recently I alway need to read xml data, by using jsp, javascript, asp, ...... Element, Node, NodeList alway come out from XML DOM. I hate them very much.

Different browsers have different DOM parsing, when the code work on IE, it didn't mean it will work on Firefox. I need to test on both browsers for so many times only I can confirm the code is working fine.

The important thing to take note when using XML DOM:
"The best way to only process element nodes is to iterate through the child nodes and only process those with a node type of 1".

Encoding the Request Parameters

Recently I just faced some problem with Ajax implementation, here is an answer I found for the problem:

"When developing a traditional Web application you don't have to worry about encoding the form data because the Web browser performs this operation automatically when the user submits the data. In the case of an Ajax application, however, it's your job to encode the request parameters. JavaScript provides a very useful function named escape() that replaces any character that cannot be part of a URL with %HH where HH is the hexadecimal code. For example, any space character is replaced with %20."

The problem is very simple, when we make a http call to any url, we should encode the request parameters. I think I faced this similar problem when doing J2ME http call as well.

This code when make a http call, the result url will become:
http://www.abc.com/testing.asp?title=Title 1&content=Content body

Do you notice what problem with this url? Ya, the white space. From server side, the title & content text will received wrongly. (White space missing)
In order to correct it, we must add an encode function to replace the special text (white space) to "%20" or "+".
http://www.abc.com/testing.asp?title=Title+1&content=Content+body
http://www.abc.com/testing.asp?title=Title%201&content=Content%20body

Then only we can receive the correct text from the http call.

Another half day gone.

Here some special text that might be useful:
1) White space - %20
2) New line - %0D%0A (Windows), %0A (Unix), %0D (Macintosh)
3) "+" - %2B
4) "/" - %2F

Div Pop Up

Hehe, I finally find out how to pop up something without window frame.

Here are the examples of a normal window pop up & a div pop up which I want to implement soon.

Both example can be run when the code paste in a html extension file. This is what I called "Div Pop Up".

Small Trick on IE7 with Ajax

Below is a javascript I wrote for Ajax call few days ago. This code run smoothly in Firefox, IE7 first call success, second call onward all fail.

Do you see what wrong on the above code? This code took me half day to debug, I was thinking is it IE7 browser bug or what. But in fact, the main reason it fail on IE7 is because IE7 make Ajax call very fast from second call onward.

The code haven't reach the set loading part already finish set result. Mistake learned.