It's odd working with IE - Part 2. comma

2. comma makes big difference in IE.
Like most technical people out there, I used to be chased by time. So, it happened from time to time to insert unwanted character by hitting keyboard without notice when I hastily moving around numerous codes. However, IE stop all my script, once, I mistakenly put comma ‘,’ in the declaration of Javascript object as follow;

<script type=”text/javascript”>
var test = {
    abc: new Array(),
    …
    def: function(arg1, arg2) {
    …
    },
    ghl: function(arg3) {
    …
    },
}
…
</script>

Because I prefer use Aptana when editing HTML pages, I did not notice what’s happened. (By the way Aptana does not provide strict error checking when it comes to Javascript) Furthermore, because I usually develop using Firefox under Linux environment, even in the first running test it goes without noticed. (Firefox seemed generous to people like me.) However, when I loaded in IE6 (I only installed IE version 6 in Linux) using sometime later, I was surprised to see that not a single line of Javascript was running from the web page, and no error message was shown.

It is true that I still did not find an editor with perfect syntax or semantic checking, in the market. Furthermore, unfortunately, Unlike C++ or Java, it does not comes with error checking program such as compiler. So, it comfortable to check such error.

There are, however, ways to avoid this pitfall.

a. Using JSLint: just as link does for C program, JSLint can hint erroneous or even under-performing code. Online version can be accessed using http://www.jslint.com/, plug-in version can be found in http://www.rockstarapps.com.
b. Using multiple editor: Just to double check errors that may remain in source code, reviewing code with another editor(editor comes with ATF, Ajax Toolkit Framework, for example) with more rigorous error checking is also helpful.

P.S. By the way, because I’m a heavy user of Eclipse, editor or plug-in is viewed from Eclipse environment.

It's odd working with IE - Part 1. <td>

It took me a while googling to find why height in is not rendered as I expected in IE (Internet Explorer), when I use code like;
<style>
…
td.under {
…
height: 9px;
…
}
</style>

<td class="under" onclick="insertRow(this, verAttribute)" onmouseover="onSideOver(this)" onmouseout="onSideOut(this)">
<img src="img/add.gif">
</td>

But, it didn’t help much. I find the answer in the Technet of Microsoft.

Many people have already knew that IE is working differently than other browser. Well, actually, most browsers are acting somewhat differently from each other. Fortunately, many of the differences in terms of using HTML tags or DOM elements are rather perceivable, if I use informative tools like Aptana. Still, most of the tools do not describe why <td> is rendering differently in IE. So I decided to add any findings in this column starting from <td>.

1. The height of <td> does not seem to work in IE.
The size of <img> is not easily controlled unless I wrapped the image inside <td>, especially in IE. In many cases, if I use “Source Formatter” or developer’s habit to separate <td> and </td>l; with CRLF, which means separated by new line, another DOM object is added. (This can be checked easily using firebug add-on.) And this cause IE to behave differently when deciding height of <td>.

If it happens, even if I enforce the height of cell with height attribute as in above example, IE re-calculate height of the cell using another new line. Which make the cell grow to the size of text. To avoid this and if you’re really considering to use your HTML code also in IE, <td> and </td> should not be separated by new line. So, if I fix above code like this;

<td class="under" onclick="insertRow(this, verAttribute)" onmouseover="onSideOver(this)" onmouseout="onSideOut(this)"><img src="img/add.gif"></td>

Then, the height of the cell in IE is rendered the same height as in Firefox.