User Experience Engineering

Stop Firefox 3.1 Event Propagation

2008-08-29T15:14:00.000-07:00

Some legacy JavaScript code broke in Firefox 3.1 recently. An endless loop was formed, causing a "too much recursion" error and browser crashes. Here's a brief summary of how the loop was formed, and how I broke out of it. I grossly simplified the code for the example.

this.htmlBuffer += '<input type="radio" onclick="doStuff();repaintForm();"';
this.htmlBuffer += '/>';
// Some other inputs
someDiv.innerHTML = this.htmlBuffer;

All tested browsers that came before Firefox 3 stopped propagation of the click event. Firefox 3 continued to propagate the click event after the form was repainted, so it effectively added a new event listener with each iteration.

I did some reading on the subject, at whirlpool and eyeOS. I tried various means of stopping the event, including...

e.stopPropagation(); // Mozilla
e.preventDefault();  // Mozilla
e.cancelBubble = true;// IE
e.returnValue = false;// IE

None worked.

The Solution

Adding "return false;" to the XHTML text of the onclick stopped event propagation in Firefox 3. It had no ill effects in Firefox 2, Safari 3, IE7, or IE6.

this.htmlBuffer += '<input type="radio" onclick="doStuff(this);repaintForm();return false;"';
this.htmlBuffer += '/>';
// Some other inputs
someDiv.innerHTML = this.htmlBuffer;

Clearly, a better solution would include use of DOM methods to construct objects, instead of innerHTML. However, this solution fixed the problem in a hurry. If your existing application seems to get caught in an endless loop only in Firefox 3, the "return false" solution may help.

Ban the Beachball : Fix Eclipse on Mac OS X

2008-04-28T19:17:00.000-07:00

The Eclipse IDE had become unusable. With each Save, the cursor would turn into a beach ball for several seconds. Startup messages pointed to a culprit: Mylyn.

java.lang.IllegalArgumentException: The feature 'application' is not a valid feature
...
Root exception:
org.eclipse.osgi.framework.internal.core.AbstractBundle$BundleStatusException
...
MESSAGE While loading class "org.eclipse.mylyn.tasks.ui.TasksUiPlugin", thread
"Thread[main,6,main]" timed out waiting (5000ms) for thread "Thread[Worker-3,5,main]"
to finish starting bundle "update@plugins/org.eclipse.mylyn.tasks.ui_2.0.0.v20070627-1400.jar [399]".
To avoid deadlock, thread "Thread[main,6,main]" is proceeding but
"org.eclipse.mylyn.tasks.ui.TasksUiPlugin" may not be fully initialized.

After reading numerous posts on the topic, I tried many different fixes. Finally, I read the words of Eugene Kuleshov: "Another option is disable Mylyn's hyperlink detector wich you can do at Window / Preferences / General / Editors / Text Editors / Hyperlinking."

What worked

Open Eclipse Preferences (Apple-,).
Type filter text "hyperlink", or navigate to General : Editors : Text Editors : Hyperlinking.
Deselect checkboxes "Mylyn Tasks" and "Mylyn URLs".
Click Apply, then OK.
Restart Eclipse.

Results

Eclipse has faster startup, scrolling, and search, takes up less memory, saves without beachball delays, and supports my favorite plugins nicely. Turning off Mylyn hyperlinking makes my days more productive.

Other Fixes Tried

Removing or disabling Mylyn did not work. It seems there are circular dependencies.
Removed or disabled plugins, including Aptana and JSEclipse.
Upgraded to 4GB of RAM. Already had 2.6GHz MacBook Pro with 180Gb HD, and Mac OS X Leopard (10.5.2).
Freed up 80GB of hard disk space.
Increased Eclipse memory settings, and found out along the way that Eclipse has a Mac OSX bug that prevents Java VM detection. In the thread "--launcher.XXMaxPermSize: Can't identify Sun VM" you'll find no fewer than 34 posts, and no resolution, as of 2008-04-21. "java.lang.OutOfMemoryError: PermGen space" was the original complaint.
Turned off Eclipse spell-checking. General : Editors : Text Editors : Spelling. This eliminated the yellow squiggly highlights under variable names and reserved words such as "var", and sped up editing. Typically 100 such warnings in a 600-line JavaScript file. With six files open, memory footprint included Real Memory: 347MB, Vmem: 2.08GB. Without spellchecking, 214MB and 1.95GB.
Ran JBoss at the command line, instead of in Eclipse.
Turned Aptana code completion (contextual help) delay up to 9999 milliseconds.

Google Project ("to-do") Wish List

2008-04-06T08:59:00.000-07:00

Google Notebook needs integration with other Google offerings to make an effective way to get things done. Why? I want project management tools in lightweight, browse-anywhere form. Google seems well-positioned to provide a comprehensive TODO system. Tasks and Projects may arrive in the form of emails, phone calls, random thoughts, or ideas while reading a Web Page. Google Project would become a data model for loosely binding other Google item types, and tracking state.

Others Lack

In the years I used it, Microsoft Outlook never added the ability to make one task dependent on another. Perhaps to do so might have threatened Microsoft Project.
Many other services that attempt to provide project tracking are cumbersome. Web 1.0 whole-page forms that only work on an Intranet, and are cumulative (record running commentary) instead of offering a way to refine projects and tasks.
Similarly-focused products have barriers to adoption, such as costing money, platform-dependence, installation of software or plugin, and software updates. Corporate buy-in is required.

Google Project would offer the following features:

Add GMail item access to notebooks.
Give Google Notebook items organizational states, such as TODO, DELEGATED, DONE, BLOCKED.
Task dependencies would be the obvious follow-on feature.
Ability to bind a Google Calendar event to a project.
Works for anyone, anywhere. Thrives through intellectual contagion.

User Story

I need to choose the most appropriate JavaScript framework for a new product in development. An email reminds me of this task. I search Google and Note 12 pages that compare frameworks and offer tutorials. The resulting Google combines these items to represent what needs to be done:

The email, with some annotation, becomes the Project
The bookmarks, with annotation, become tasks. E.g.: Compare jQuery and Dojo at URLs "A" and "B".
I schedule a meeting with another developer in Google Calendar.
I am reminded of the project and subtasks from multiple places: Google.com/ig Notebook widget, GMail labels, Google Bookmarks, Google Calendar, and Google Notebook.

Google may benefit by expansion of its advertising base, and by upselling to an Enterprise version.

Use Cruzer on Mac OS X and Keep U3 -- Easily

2008-03-02T07:24:00.000-08:00

Synopsis: I can use my SanDisk Cruzer on Mac OS X, with a simple settings change. From Windows XP, I disabled U3 security in the U3 Launchpad menu. No removal tool or hacks were necessary. I can now launch Windows applications from the USB key, and use it as file storage on Mac and Windows.

Many forum and blog posts complain about lack of Mac OS X support on the flash drives made by SanDisk, which come with U3.exe Launchpad. They describe U3 Software removal tools and reformatting the flash drive in order to "use all of it". These steps allowed me to make a simple settings change, and retain the ability to launch programs on Windows XP using "U3 Smart Programs."

Prepare SanDisk USB for Mac OS X

Insert Sandisk Cruzer into Windows XP USB port.
Autoplay causes the U3 prompt to come up.
Enter password.
System tray icon "U3" appears.
Click on U3 System Tray icon
Select "Disable Security"
Re-enter password if prompted.
Security button changes to "enable:.

That's it. To verify that it worked, I performed the following steps.

Verify U3 USB Key Working on Mac OS X

Click U3 System tray icon, and select "Eject".
Remove flash drive from Windows USB port.
(In my case, the SanDisk Cruzer micro 4GB)
Stick flash drive into Mac OS X USB port
In Finder, click on the drive.
(It appeared as "No Name", next to Macintosh HD.)
Select any subfolder.
e.g. Documents
Perform read/writes to the USB key from Mac OS X.
e.g.:Create new folder, edit a text file, save a new file, copy files to and from the flash drive

CSS Alignment and Color Matching Method

2007-08-02T15:47:00.000-07:00

I often get a Web page mockup from a graphic designer, and the task of implementing the design in CSS. I use this trick to achieve precise alignment and coloring, without spending much time measuring:

Save the mockup as a PNG.
On Chris Pederick's Web Developer Toolbar, Click CSS: Edit CSS.
Edit the CSS in the toolbar to make the PNG your body background. The real document elements now render over the background, which highlights alignment and color mismatches.
Continue editing CSS until the colors match.
Then edit the CSS until page elements align, overlapping the background image exactly.
Test by removing the mockup background image statement in the CSS. The page should look no different as you toggle the mockup on and off.
Click the Save button in the toolbar's Edit CSS view.
Save the CSS changes locally, and then promote the finished CSS to the server.

And of course, follow up with browser testing.

A New Xbox 360 Has Been Detected

2007-04-25T18:21:00.000-07:00

This little notice came up in Windows XP Media Center Edition: Not even close, Windows MCE. The only things I have plugged in lately are a camera memory chip, an mp3 player, and a USB key.

I also got a message over the weekend that my Sansa mp3 firmware updater had an update. It turned out to be false. The updater updater was nowhere to be found. Maybe I need the updater updater updater...

PayPal to Quicken Download

2007-04-13T19:18:00.000-07:00

PayPal, as of this writing, does not support convenient download to Quicken. Intuit/Quicken have made a transition to OFX, Open Financial eXchange. They are gradually phasing out the kludgey old QIF process, which eliminates many steps toward getting your data.

Workarounds

Set up PayPal as a Cash Account in Quicken.
Enter transactions manually.
Use a QIF to QFX converter tool (technical users). Note: You must be comfortable editing and compiling C++ applications.

Downloading your PayPal account history

Your PayPal account history contains detailed information about all of your transactions, including payments sent, payments received, withdrawals, money requests, and more. You can download your PayPal account history into a file that can be used with Quicken, QuickBooks, and most common spreadsheet and database applications. Visit the PayPal Help Center to learn more about downloading your PayPal account history.

Q: How do I download my transaction history?

A: You can download your transaction history from the History subtab. Make sure you write down the location of the file when you download it, to make it easier to find on your computer later.

Here's How:

Log in to your PayPal account.
Click the History subtab.
Click the Download My History link.
Choose the file type and date to download.
Click Download History.
Name your file and click Save to download it.
From Quicken, Click File : Import, and select type QIF.
Select the file that you downloaded in step 6 and click OK.

This process did fill the new Quicken account with transactions. However, the balance was off, and I have not found a way to update the new account. PayPal needs to catch up with the standard.

Start Menu Blackout

2007-03-29T18:58:00.000-07:00

Windows XP, after waking from a "stand by" or hibernate, sometimes has a broken Start Menu. The list of programs appears blacked out. Mousing over it produces no hand cursor, context help, or links to programs. This screen shot is from a Dell laptop running Windows XP Media Center Edition. The only solution I have found is to kill explorer.exe and relaunch it. After restarting explorer with the Windows still running, the program icons in the task bar appear in reverse order (last-launched on left, first-launched on the right).

Debugging a Firefox Crash at Startup Time

2007-03-19T08:38:00.000-07:00

In setting up a new Windows XP 64-bit machine, I dowload a heap of Firefox addons, some old favorites and many new ones. The disadvantage to gorging on Firefox Extensions all at once? If something breaks, it's tough to identify the culprit.

How to Determine Which Firefox Addon is Causing Crashes

Restart Firefox in safe mode. Explorer C:\Documents and Settings\All Users\Start Menu\Programs\Mozilla Firefox Click "Mozilla Firefox (Safe Mode)". You may want to copy this shortcut to your desktop -- you will be using it repeatedly.
A dialog box opens. Click checkbox "Disable all addons" and button "Continue Firefox Safe Mode"
Disable half of the new Firefox addons. Tools Menu : Addons Click button "Disable"
Quit Firefox (Safe Mode). Make sure the process firefox.exe quits by Opening the Task Manager.
Restart Firefox in normal mode.
If the crash recurs, repeat steps 1-5, disabling more extensions each time.
If the crash does not recur: You have disabled the offending extension. Repeat steps 1,2,4 and 5. Replace Step 3 with "Enable half of the disabled extensions. Eventually, you will crash again, and you will know which extension caused it. Restart in safe mode and uninstall the bad extension.

In my case, the offender turned out to be the addon "Load Time Analyzer".

Troubleshooting Bluetooth on Dell with XP SP2

2007-01-12T16:20:00.000-08:00

In a nutshell: If you are running a Toshiba Bluetooth network adapter under Windows XP Service Pack 2, you may need to ditch the Toshiba driver and let Windows XP handle it.

I recently purchased a bluetooth-capable wireless phone from T-Mobile. I proceeded to try and pair it with my Dell XPS m140 laptop. My purpose was to use the computer for keeping address book, calendar, and task items, and keep the phone simple, and lighter than a PDA.

At first, Bluetooth did not even start up from the system tray icon. The only right-click option was "start bluetooth". After selecting that, the installer for Toshiba Bluetooth Stack started. It warned that installation would take up to fifteen minutes. In fact, it would stall at 63% complete on the progress bar, and then get stuck in a loop.

Dell XPS "Express Service" support told me that I needed a new driver from support.dell.com, a 26MB download. I downloaded and made four attempts to install the new driver, as follows:

Only option in the installer was to remove the driver. I chose it.
Error message claimed that no suitable transfer protocol was found.
Error message claimed that no suitable transfer protocol was found.
Firmware update proceeded.

Each time, I accepted the warning message that the new driver was not Windows Logo Compliant.

The driver thus installed met with intermittent (buggy) results. The phone could initiate connection to the laptop, but not vice versa. And, one other problem persisted. I called up Bluetooth settings, chose the options tab, and ticked the box "Turn discovery on". When I hit Apply or OK, I would receive the message, "An error occurred while windows was saving your settings. The following settings were not saved: Discoverability settings, Connection settings". Also odd was the fact that I saw two Bluetooth icons in the notification area, one for Toshiba and one unlabeled (resumably Windows XP).

I spent some more hours on the phone with Dell tech support. I installed DellConnect, and allowed them to view my screen remotely. They had me repeat the same steps, with the same results. Then, they tried a number of different steps, one of which led my system to recognize Bluetooth as a dialup network connection.

While on hold, I discovered an article on PC Advisor Forums, which led me to Microsoft Knowledge Base article 883258 (KB883258). The gist of the Microsoft article is that certain Bluetooth drivers did not work after Windows XP Service Pack 2. To restore bluetooth device functioning, one must remove the manufacturer's driver, and let Windows XP recognize and handle the Bluetooth device.

I told the Dell technician about KB883258. He seemed interested, but objected to the removal of Toshiba's driver, and advised me to reinstall it. That did not work. He wanted to confer with others, and I asked him to call back.

I then worked on my own. The KB article advice got me most of the way there. The following additional steps may be specific to my hardware.

Removed the Toshiba driver, using their installer (I could have used the control panel Add/Remove Programs).
Canceled the Found New Hardware Wizard
Rebooted.

The discovery checkbox then worked. (I Double-clicked the Bluetooth system tray icon, selected the Options tab, and ticked "Turn discovery on".) The laptop could then add the phone as a Bluetooth device. I noticed that the KB article dated from November 2006, five months after the release date on the Toshiba Bluetooth Stack v4.00.22D and firmware upgrade v24.22 for Dell Wireless 350 Bluetooth Module. (XP SP2 has been around since August 2004).

The Dell tech then called me back, and suggested that I back up all my data and restore the computer to factory settings. I declined, and said that Bluetooth worked, now that the Toshiba driver had been removed.

Happy with the solution that I had found, Dell gave me a small credit to my account. Will they update the page on support.dell.com to eliminate the Toshiba driver and point to the Microsoft article? Time will tell.

Battle of the StartPages: Round 1

2006-08-05T00:01:00.000-07:00

I began a comparison of personalized startpages: My Yahoo vs Pageflakes vs Google/ig vs... I wanted to select a given task, and then try the different brands to see how well they serve that purpose. So, I chose job hunting; which personal portal is best for organizing and streamlining a job search? Seems like a project with plenty of room for search, feeds, aggregation, and productivity tools.

Today, I worked with my.yahoo.com and pageflakes.com. Performance would be difficult to quantify, I knew, so I invented the ever-so-casual "ClunkFactor". Clunkiness is here defined as the number of modules/widgets/feeds that could be added to a personalized home page, divided by the number of page loads it took to get there. This reflects the bias that in Web 2.0, page loads are bad, and page updates are good. I cleared browser history for Firefox 1.5.0.6, and began building a job pages.

Site              Modules    Pageloads*
my.yahoo.com      7          46        
pageflakes.com    11         29

* In Pageflakes, the pageloads include signup for box.net, uploading a resume, accessing Gmail, and accessing Web pages with Bitty Browser. For My Yahoo, those 46 page loads were chewed up just by searching for feeds and adding them.

My.Yahoo.Com

If you do not let an entire page load, with all feeds, my Yahoo will not allow you to change pages. So, if your default page is News, but you want to change to jobs, you are stuck waiting until each feed loads, for the page menu to respond to input. Workaround: make your default page very sparse. When changing from full pages, grin and bear it.

I loaded the HotJobs module, and noticed several disadvantages.

To configure, you have to load a separate page
Only one job search category selectable at a time. Not Internet AND Technology, e.g.
No keyword input
No radius or proximity search, only City/State.
Search box loads new page

Finding those seven feeds with My Yahoo was frustrating. Many feeds that turned up in search results were too general, such as all jobs in Columbus, or too specific, such as HR managers in Dubuque. I could not really add useful job searches without leaving my yahoo, and searching on job sites. I did not come across any functional non-feed modules that would be a handy accompaniment to the feeds. C+.

Pageflakes.com

Pageflakes essentially has only one URL, which would help toward the reduced page loads. Tabs are always visible, and clicking them "turns the page" without changing the URL in the browser address bar. Adding a new page is very quick. When adding content to that new page, Pageflakes distinguishes between feeds and modules. This distinction is unclear on Yahoo, to the uninitiated, and quite confusing on live.com.

Modules or "flakes" as they're called here, are located by browsing a gallery of 90 or so items. Pageflakes will need to implement some kind of search, as it's unreasonable to expect users to read all 90 widget descriptions. A scarcely noticeable dropdown menu in the top right does help. It allows you to select tags such as "productivity", "fun" and "communication", to see a subset of the flakes.

Productivity Flakes

At pageflakes.com, productivity includes tools for productivity. This is better than live.com, where "productivity" means "shopping". Here's the Pageflakes productivity lineup:

Documents: Writely; Zoho Writer
Email: Gmail; POP Email
Storage: Box.net 1GB, registration, login, and read-write can all occur in the flake!; Openomy 1GB, restricted to retrieval only.
Organization: To-Do-List Developed by Pageflakes; Note; Address Book - no slurper, no real interaction with email; iCal Calendar Access; iRows Calculator; iRows Spreadsheets

Difficulties:

Layout gets confused in Firefox; items overlap and do not stay put. I had to continue the testing in Internet Explorer 6.
Forms within flakes do not submit when you hit Enter key.
Long module names do not wrap. E.g. SimplyHired.com search with custom name.
After each flake "add", browser returns to page where you added. Each flake then renders. Therefore, each flake-add takes longer than the last.
Gmail module read-only. To read the body of a Gmail, you must open a new window.
Mail is more functional, and can be configured to POP3 accounts. However, the second account that I added failed to load any message
No search for feeds or widgets.
No job posting feeds listed. As with My Yahoo, you must leave the site to gather job feeds.

Niceties:

preference: Open links in...: New Browser window; Pageflakes browser; This browser window

Clicking on a feed in your startpage opens the Pageflakes RSS/Web Reader View. It overlaps other modules.

Browse your saved feeds in the left column, view titles in the right column, and read description (rss) or view Web page in the bottom pane. Here, I have aggregated advanced search feeds from Yahoo HotJobs, and simplyhired. An interface like this allows for the rapid digestion of daily feeds or search results. With my.yahoo.com, these feeds would be stuck in their little boxes, and to read any full listings would require a new page-open. In the upper right corner of the Pageflakes feed reader, you can click buttons to toggle between rss description and original Web page, or click the X to collapse the reader. That's more like it.

Round 1 goes to Pageflakes for less clunk and more functionality with fewer page loads. The broken drag-and-drop positioning in Firefox is serious. While the Pageflakes team is fixing that, I might be able to live without Firefox tabs for this one activity. The tabs, and the goodies, are all in the page.

Update: Layout problem in Firefox with Pageflakes appears to be fixed.

Windows Live ... (?)

2006-08-03T20:13:00.000-07:00

I am testing live.com without an account, at the moment. With its' multi-column drilldown, Windows Live.com borrows a page from the Macintosh OS X Finder. The selection feels a bit empty and puzzling at present. For instance, under "Add Stuff" I browsed the "Productivity" directory, expecting to see todo lists, maybe email, project tracking...

Here are the contents of their columns:

Productivity|*Shopping     | There are currently no items in this feed.
            |Safety Center |
            |              | [add]

Drilling down four levels to find "no items" is disappointing. Also, Shopping would be more consumptive than productive... But, I'm here for the user experience, so I clicked "add". Shopping Beta appeared on the page I had created. So, I got shopping beta by selecting it from a list with no items? Huh?

(I later saw that News feeds typically had items, whereas Shopping does not).

I typed "iPod" into the Shopping Beta form, and clicked the search button. Fast but sparse results appeared, with the listings in wrapping lines, which used the available space efficiently. Live.com calls the wrapping lines format "grid", and has an optional format called "text". "Text" eliminates the pictures and produces rather ugly and repetitive-looking result links. It appears to add price comparison functions.

At the top of the results were controls which I took to be for sorting purposes. Each header or label had a downward chevron symbol.

category brand price range seller

Clicking on these, instead of sorting, produced Ajaxy dropdown menus of the brands, sellers, etc. Selecting one narrowed the search results.

Each result bears a link reading "add to list". Click it, and the browser scrolls to the top of the page, where there is neither list nor item. That's because they are using an href that goes nowhere: http://www.live.com/#, instead of an intra-page link such as #list, or a do-nothing href, such as "javascript:;". Scroll to the bottom, and you discover that the item is added to your list.

There does not appear to be a way to check out. I tried clicking on the link at the top of the module, and was startled to find that a new window opened, and took me to shopping.msn.com. Apparently, I had left my page by performing a Shopping Beta search. The only other controls in the module are "Recent Searches", and links to "Travel essentials", "Tech on sale", and "Summer fashion". Each of these also leads to a new window with an MSN shopping page.

There is a colored divider bar that links "back to my page". This is only necessary because the current module, Shopping Beta search results, has replaced mail, slashdot, and my other widgets on that page. So, unlike Pageflakes.com, google.com/ig, and my.yahoo.com, these do not appear to be functional widgets within pages. They are little more than links to existing Microsoft pages, and a little Ajax to make it possible to find the links and drag them around. Some functions take over "my page", the composition of widgets that I made for a purpose. We do have our reasons for mashing together different content, right? Others open in a new window, representing an even greater disconnect.

It would seem that CNET's Ina Fried got it right when writing "Is Windows Live just another name for MSN?" But that was November 3, 2005, a couple of days after Windows Live was announced. Nine months later, I ask, "is this thing live?"

Shorter HOMEPATH for Windows: %~%

2006-07-24T19:17:00.000-07:00

How annoying is it that your home directory under Windows contains spaces, capitalization, and long words?

C:\Documents and Settings\monte>

Cygwin fans, myself included, have long made an alternate directory structure to mimic Unix. Windows sees my such directory as

C:\home\monte>

Through my Cygwin configuration, bash.exe resolves the tilde character as the current user's home directory.

echo ~ /home/monte

If you've spent any time in *nix or Cygwin, you know how handy this shortcut can be.

Still, most Windows applications default to the Windows %HOMEPATH% directory, or worse, the "My Documents" and other pre-made directories below %HOMEPATH%.

C:\> echo %HOMEPATH% C:\Documents and Settings\monte

So, when you try to save or open a file, you have to go hunting for it in your real directory structure, or conform to Windows. Or, you could set the default directory for each application, and hope the settings are not in your next update or BSOD.

I got tired and finally tried something twisted:

My Computer : Properties : Advanced : Environment Variables User Variables for %USERNAME% [ New ] Variable Name:~ Variable Value:C:\home\monte OK : OK : OK Start:Run cmd echo %~% C:\home\monte Run %~% Explorer window opens to home path. Almost Any Application : File : Save As %~% ENTER key Explorer in dialog box switches to home path.

Okay, so typing "%~%" is three times longer than "~". It's still one third the length of "%HOMEPATH%", and one fifteenth the length of "C:\Documents and Settings\monte\My Documents".

And for Windows, that is progress.

Trebuchet MS + Blogger CSS = IE6 Crashes

2006-05-17T23:30:00.000-07:00

For some reason, Internet Explorer 6 began to crash when pages of rootlet.blogspot.com would load. The IE6 crashes stopped after I removed the following:

Two measures could stop the crashes in my test environment. One was to remove the the import of blogger_controls.css, which I cannot do in practice. The other was to remove the quoted font-family "Trebuchet MS" from the inline style for BODY. So IE6 users will see Arial instead.

The crashes were not accompanied by Javascript error messages, and the Microsoft debuggers were not available. The results were consistent on two separate Windows systems, one running Windows XP, and the other running XP Media Center Edition 2005. Have insights into IE6 crashes related to CSS? Please comment.

Ken's Meme Deflector: XBlogThis!: An Extended BlogThis! Button

2006-03-20T12:54:00.000-08:00

Technorati tags: bookmarklet

User Experience Engineering

2006-03-20T12:05:00.000-08:00

User Experience Engineering

Technorati tags: CSS Bar Graph

IE6 Stretches Css Box Elements

2006-03-19T18:23:00.000-08:00

Other authors have noted that Internet Explorer 6 will "stretch" box elements to accomodate their contents. I came across this bug when creating a CSS-based bar graph. Note that "1.3%" has expanded to enclose the words "US Average 1.30%", making it useless as a graph bar.

Firefox 1.5 does not have this problem. It rendered the bar 1.3% wide, and allowed the text to overflow the box, as coded:


 .graphBody{
  display:block;
  width:400px;
  background:#555;
  border:none;
  white-space:nowrap;
  color:WHITE;
  padding:3px;
  font:11px verdana,sans-serif ;
 }
 .graphBody a{font-weight:bold;}
/* snip */
 .USAverage{
  background:GRAY;
 }


<div class="graphBody">
<a title="Addition of new jobs">Recent Job Growth</a>
 <div style="width:2.61%" class="Seattle"> Seattle  2.61%</div>
 <div style="width:3.67%" class="Austin"> Austin   3.67%</div>
 <div style="width:2.12%" class="Atlanta"> Atlanta  2.12%</div>
 <div style="width:4.12%" class="Miami">  Miami      4.12%</div>
 <div style="width:2.98%" class="SanDiego"> San Diego 2.98%</div>
 <div style="width:1.68%" class="Tucson"> Tucson     1.68%</div>
 <div style="width:1.30%" class="USAverage"> US Average 1.30%</div>
</div>

This occurred despite the use of strict mode. To defeat the IE6 Box-stretch bug, I added spans to contain the text, and gave them a position:absolute. At first, this caused the desired text flow, but the background color of the containing DIV was lost. This was remedied by the addition of a height attribute to the containing DIV.

 .graphBody{
  display:block;
  width:400px;
  background:#555;
  border:none;
  white-space:nowrap;
  color:WHITE;
  padding:3px;
  font:11px verdana,sans-serif ;
 }
 .graphBody div{display:block;overflow:visible;height:13px}
 /* div height 13px, plus span position:absolute; 
           forces labels to flow outside the box in IE6 */
 span.lbl{
  position:absolute;
  text-indent:100px;
  white-space:nowrap;
  width:394px;
 }
 .graphBody a{font-weight:bold;}
 /* snip */


<div class="graphBody">
<a title="Addition of new jobs">Recent Job Growth</a>
 <div style="width:2.61%" class="Seattle"><span class="lbl">Seattle 2.61%</span></div>
 <div style="width:3.67%" class="Austin"><span class="lbl">Austin 3.67%</span></div>
 <div style="width:2.12%" class="Atlanta"><span class="lbl">Atlanta 2.12%</span></div>
 <div style="width:4.12%" class="Miami"><span class="lbl">Miami 4.12%</span></div>
 <div style="width:2.98%" class="SanDiego"><span class="lbl">San Diego 2.98%</span></div>
 <div style="width:1.68%;height:13px" class="Tucson"><span class="lbl">Tucson 1.68%</span></div>
 <div style="width:1.3%" class="USAverage"><span class="lbl">US Average 1.30%</span></div>
</div>