IE is just strict

Most of Web Developers/Designers hate IE, me too. But sometimes I think IE is just strict. Today, my friend asked me for help to debug some JavaScript/html code, which works fine in Firefox and Chrome, but had many problems in IE (including IE7 and IE8)

Problem one: invalid argument

Some JavaScript code broke due to invalid argument. Thanks to IE8’s Developer Tools, which works just like Firebug. I found the line that had problem as the following,

$("#"+mainid).css("background-image", "url(/images/new/plus.gif) ");
//this is a jquery code to update background image

Note sure if you detect that there is an extra space after second parameter of css() function. Which causes the “invalid argument” error in IE, but Firefox is “smart” enough to ignore the space. This reminded me another “invalid argument” error I saw before, which is similar to this one, but instead has an extra comma like the following,

$('#abc').load("test.php", {
"arg1" : "cai",
"arg2" : "apps",

You see the extra comma after “apps”, which would cause “invalid argument’ error in IE and brake your script.

Problem two: the <div>inside<ul>

See the code in the following,

    <li><a href="link1">link1</a></li>
    <li><a href="link2">link2</a></li>
    <li><a href="#">more</a></li>
    <div style="display: none;">
    <li><a href="link3">link3</a></li>
    <li><a href="link4">link4</a></li>

The purpose of this code is to hide the link3 and link4, unfortunately, it does not work in IE6/IE7/IE8, actually in the IE7 and IE6, it messes up the whole page layout if you have this piece of code in your page. But in Firefox, it works normal. I am not sure “<div>inside <ul>” is valid or not, but seems to me, it is very bad coding. I also remember last time I have typo in my code that I wrote,

<h2>Some thing<h2>
<p>some thing very cool</p>

I forgot to add backslash to close<h2>tag, all the text after that become h2 style in IE, but not sure why Firefox is so smart, which just renders the page correctly. :-) So you know what I say, in those cases, I would not blame IE at all, because it’s just strict!

Chrome Sync

Most of people work with multiple computers daily, maybe one at company and one at home. So the browser sync become very important. You find some cool websites and add them into your browser bookmarks during the work, and they will show up on your browser of your home computer by using browser sync.

I has been used XMarks for a few year, and it works very well. Unfortunately, recently they annouced that XMarks will be shut down on January 10, 2011. I think XMarks will be still there, but not free anymore. So I was looking for new services, which can do the free sync for me. And then I found Firefox Sync, which is from Firefox Lab and works for Firefox user. I have not tried Firefox Sync yet, but will do.

Today, I will show your how to sync Google Chrome. I googled “Chrome Sync”, and people are talking about using extension or add “–enable-sync” at the end of the target URL of desktop shortcut, etc. Actually, if you are using current version of Chrome (by the time I am writing this, I am using Chrome V6.0.472.63), Sync function is actually a part of Chrome. What you need is a Google account and following the below 3 easy steps.

1. Click wrench icon and select option

2. Under Personal Stuff, you will see Sync, and then click Setup, enter you Google Account and Sign in.

3. And then in the next window, you can configure sync, by default Google Chrome syncs everything including autofill, preferences, bookmarks, themes, and extensions, but you have choice to choose what to sync. After you hit OK, it may take minutes default on your network speed and your data size. You will be prompt you are all set.

The Very First Steps After a Fresh Firefox Install

Just got your new computer, not matter Mac or Windows, as a web developer, you may install Firefox first. so I’ll share with you my “first steps” after a fresh install to get Firefox set up to my liking. This involves some universally useful add-ons (specially for a web developer) and changing settings.

At the time of this writing, I just bought a new laptop (Latitude E6410) and installed Firefox (V3.6.10) definitely.

Add ons

Web Developer

Just like its name, Web Developer is mainly for Web Developer. But I think even for other users, it’s indeed a handy tool. For example, you can easily delete cookies set by current website (not remove other cookies that you may want to keep), and you can view a website’s images information. If you are web developer, then there are a lot of great thing this add-on provides, such as viewing Frame source code/Generated source code, resizing browser window to any size, using ruler to measure the size of page objects, etc.


Another great tool for every web developer for sure. The top feature of Firebug is that you can click on the page element to inspect and edit (both html and css in a real time) and it’s also a very good JavaScript debugger.


Check and copy color code of any spot on your browser. Colorzilla also includes color picker, color palettes and page zoomer.

Google Toolbar

There are tons of browser toolbars, Yahoo, MSN, Google, etc.  Almost everyone makes toolbar. I hate to install toolbar because it makes browse window crowding, but I do install Google Toolbar, because I use Google services a lot, which help me easily access Google service via various buttons.


I have been used XMarks for a few years, I like it very much. It helps me sync bookmarks anywhere on different computers. Unfortunately, recently they announced that XMarks will be shut down on January 10 2011. I am going to try Firefox Sync.

Firefox Settings

Rearrange Toolbars

The great feature I first see in Firefox is that it allows you to add or remove itms by dragging to or from the toolbars by right click on toolbar area and select customize. For example, Google toolbar has search box and Firefox itself has a search box, you can drop one off.

Open search result in a new tab

By default, search box returns search result in the current page, which is annoying sometimes. The quick tweak is press ctrl before you hit enter, but I always forget to do so. Fortunately, there is a persisted way to ‘fix’ this.

  1. Type ‘about:config’ in Address bar
  2. Type ‘search’ in Filter bar
  3. Find a Preference Named ‘’; double click it to set its Value to ‘true’

That’s it! You may also have your “first steps”, and you are welcome to add some here.

My site could not be opened in Google Chrome

Tonight I could not open my site in Google Chrome. Homepage looked like had shown up, but it’s actually from cache. The message on the left-bottom status bar told me that Chrome was trying very hard to load’s home page. Eventually, it timed out, "Oops Google Chrome could not connect to !" I tried reload the page, but the same thing happened. At the same time, I tried to open my site in IE and Firefox, they all loaded my site in a second. So apparently it is Chrome’s problem.

Finally, I fixed the problem by cleaning browser’s cache. The following is step by step to clean cache in Google Chrome,

1. Click wrench icon on the top-right of Chrome and select "Option".


2. Under the Hood / Privacy, click "Clear browsing data …"

3. Check "Empty the cache" ( you may uncheck other items if you don’t want to clear them) and select data period, I selected "Last day" because my site worked fine yesterday in Google Chrome, and then click "Clear browsing data".