Archive for the ‘Development’ Category

CSS Vista!! o la la!

Thursday, June 21st, 2007

Something that I had wished for long is now a reality! I can now edit CSS live in Internet Explorer. The feature that was available only in Firefox. Isn’t that cool!!

CSS VISTA
CSSVista is a free Windows application for web developers which lets you edit your CSS code live in both Internet Explorer and Firefox simultaneously.

Annoying “image flicker” in IE6

Friday, May 25th, 2007

One problem that developers face is an annoying “image flicker” that sometimes shows up when using CSS image references in IE.

We encountered this during post production testing few days back. The server started getting requests in thousands for the images used in the navigation menu thereby increasing the load on it’s CPU, which was reflected in the site’s performance as it was getting slower and slower with every passing minute.

We analysed the page headers with ieHTTPheaders explorer bar for Microsoft Internet Explorer (which displays the HTTP Headers sent and received by IE as you surf the web) and found that there were multiple requests sent to the server for a single image on a page. The caching too was working fine.

So why was this happening in IE?

Internet Explorer 6 seems to check for a newer version of the background-image css property on links (A tag) every time you move the mouse over a link.

This was fixed by using the BackgroundImageCache MSHTML command identifier. Just add some javascript lines of code inside the HEAD of the page:

try {
document.execCommand("BackgroundImageCache", false, true);
} catch(err) {}

After implementing this fix for IE, the requests to the server were monitored at peak. The image requests were significantly reduced and thereby reducing the load on the server’s CPU.

Read forensic analysis of what this command does at Dan Popa’s blog
Credits: Mister-Pixel.com

Update:
Microsoft itself claims that the available memory decreases if you view a webpage containing background color and background images. Don’t know how can they allow such a bug to get through their testing?

Read complete details on their Help and Support page.

Installing multiple versions of Firefox

Friday, May 18th, 2007

Lately, during our development process, we came across a situation wherein we had to test our application designs on Mozilla Firefox 1.5 and 2.0. This was causing a lot of problems as we had to keep checking on multiple machines, because each machine had only one version either 1.5 or 2.0.

I read many posts on how to install multiple versions of Firefox. But there as a catch, I could run only one instance at a time. That means, if I open a window for Firefox 1.5, I can’t open another window with Firefox 2.0

Below are the steps I followed with inputs from Hiveminds

  1. Download both the versions of Mozila Firefox (1.5/2.0) into a seperate directory
  2. Install both the versions into a seperate directory using the “Custom” option. For e.g. for 1.5, I used
    C:\Program Files\Mozilla\Firefox1.5.x
    and for 2.0, I used
    C:\Program Files\Mozilla\Firefox2.0.x
  3. After installing, open the profile manager. Go to Start > Run and paste the below code
    "C:\Program Files\Mozilla\Firefox2.0.x" -ProfileManager
  4. Create two new profiles viz – “Firefox1.5.x” and “Firefox2.0.x”. Doesn’t matter which directory it saves in
  5. Fire up your notepad and paste the following code for FF2.0
    @echo off
    set MOZ_NO_REMOTE=1
    start "" "C:\Program Files\Mozilla\Firefox2.0.x\firefox.exe" -P "Firefox2.0.x"
    set MOZ_NO_REMOTE=0save it as "FF2.0.x.bat"

    paste the below code for FF1.5@echo off
    set MOZ_NO_REMOTE=1
    start "" "C:\Program Files\Mozilla\Firefox1.5.x\firefox.exe" -P "Firefox1.5.x"
    set MOZ_NO_REMOTE=0

    save it as “FF1.5.x.bat

  6. Save both the files on your desktop and you are done! Execute both files one by one and see the magic unfold ;)