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.

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

Update:

The link displayed earlier was actually a link ot their access domain as they were in the process of moving their servers. The link has now been updated to cssoff.com

Got a mail from my collegue informing about the CSS-Off contest. The contest is quite interesting. Below are the contest details, it’s mission and the judging criteria.

The Contest:

• Convert a .psd into HTML making use of web standards, in twelve 24 hours or less. Think SimpleQuiz, except it’s the final exam.

The Mission:

• To actively engage the web community in web standards with an emphasis on valid, semantic markup
• To emphasize good web design as an integral part of the development process
• To use the contest as an opportunity to teach

Judging Criteria:

decisions will be made based on simplicity. Simplicity in web design comes in many forms, especially these: meaningful markup, standards, accessibility, creativity, designing for the web and problem solving.

Visit the Contest Page