Posts Tagged ‘css’

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.

User Friendly Form Spam Block

Thursday, December 25th, 2008

SPAM, SPAM, SPAM. How do I hate thee.

Well, it finally happened again – abuse of one of our web pages by spammers.  This time, it is form spam – an automated web crawling tool (I assume) has discovered the “save/send/share” feature of print-bingo.com.  That form lets print-bingo.com users email their custom bingo designs to friends, family, or themselves. This form is now used by a spam bot network to send poor quality spam using our “invite” emails.  I’m currently getting about 10 bounce backs a day and growing – it has to be stopped before my VPS gets blacklisted for spamming.

I could setup a CAPTCHA, but I hate them – particularly the ticketmaster.com’s.  So, I will try to foil spammers with simple tricks to fool “dumb” automated spam software.

I’m trying a hidden to humans “fake” email field.  This post Quick tip to fight email form spam is the model.  The basic idea is to create a form field with “email” in the name and hide it with CSS (display:none) so that humans will not see or fill in the field.  Then deny attempts to use the form where the hidden field has been filled in.

We’ll see how well this works.

Merry Christmas!

Fixing list indent in CSS

Sunday, March 23rd, 2008

A very quick post for today.

I was tweaking the layout of Naque, our unique names generator.  It took a bit of fiddling to eliminate the indentation of the list elements in an unordered list.

E.g. <ul><li>first item</li></ul>

For some reason I couldn’t remove the ident.  Margin (left) was the obvious thing to change.  However, you also have to change the padding!

CSS, so nice, yet so confusing sometimes…