Archive for October, 2009

Cross Browser Compatibility of TEXTAREA and Chrome, Firefox, and IE with CSS “white-space: nowrap;”

Monday, October 19th, 2009

Today, the Perceptus Web Tools got a minor upgrade to improve browser compatibility.

A company bought a  license to our unique Excel to SQL INSERT Commands tool for their internal, confidential, use.  Cool! We never expected tools.perceptus.ca to be a revenue generator… but it does have unique features.  After all, we wrote them because we couldn’t find another website that could do the task for us!

In the interest of delivering a nice package to our new licensee, we  noticed that many of the text mangling features did not work in Google  Chrome.  Chrome web browser was stripping line breaks and consolidating sequential “spaces”.  We then realized that the site was not working in Internet Explorer either. Whoops.  Well, it is a  site primarily for our own internal uses, after all.

We had discovered a browser compatibility issue that probably affects very few people. We want a textarea without any wrapping, because some features are based on copy and pasting large amounts of data from Excel – automatic text wrapping makes hard to read.

Our original, Firefox functional, Chrome and Internet Explorer non-functional, TEXTAREA used the following:

  • CSS: white-space: nowrap;
  • TEXTAREA attribute: WRAP=”OFF”

In Firefox, we got a nice blob of text that you can scroll horizontally displayed.  In IE7 and IE8?  All kinds of crazy.  “Enter” keys got replaced by some sort of special inline character, lines and spaces got trimmed or cut out.  Google Chrome stripped out line breaks and leading spaces, and other oddities.

Upon research, we learned that the “WRAP” attribute is not W3C approved.  Technically, it is not deprecated, but that’s because it never existed in the specifications. So we removed it and tried to use only CSS. We tried a few combinations of the overflow, white-space, and display CSS properties.  They didn’t work.

What did work?

No CSS at all.

If you view the source of the tools.perceptus.ca site and the corresponding CSS file, you will only see this:

<TEXTAREA NAME=”thetextROWS=”20COLS=”100WRAP=”OFF“>

This works as we wanted in all three web browsers.  It is officially non-standard.  But it works.

If someone would like to submit a CSS that will actually work, I’d love to see it.  But for now, I’m just going to keep complaining about how much web programming still stinks. Maybe the moral of the story is that thanks to Apple’s Safari and Google Chrome, every web site should be tested against at least one of the Webkit based browsers in addition to Firefox and Internet Explorer.

Halloween 2009 Bingo Card Template

Wednesday, October 14th, 2009

Here’s a treat for kids from Perceptus Solutions Inc., and our website, print-bingo.com. Teachers, and parents are invited to create free Halloween themed bingo cards using our template word list for All Hallows’ Eve.

Just like every other word list at print-bingo.com, you are in control.  You can customize your bingo cards to your heart’s delight.

Plus, for a small

upgrade cost of $10, you can get even more features.  But even our free service is great for most users.

Well, we forgot to create and post about using Print-Bingo.com to create custom Canada’s Thanksgiving Day and American Columbus Day bingo cards.

Oh well.  At least we remembered that Halloween is right around the corner, so here is our annual reminder that print-bingo.com is great for creating themed bingo cards to celebrate the day of tricks and treats. Teachers and parents are invited to create free customizable Halloween bingo cards using our template word list for All Hallows’ Eve.

Just like every other word list at print-bingo.com, you are in control.  You can customize your bingo cards to your heart’s delight.

Plus, for a small upgrade cost of $10, you can get even more features.  But even our free service is great for most users.