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=”thetext” ROWS=”20” COLS=”100” WRAP=”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.