Grantovich.net

While the latest version of Microsoft’s much-maligned browser did fix a menagerie of rendering bugs in the process of introducing full CSS 2.1 support, it unfortunately introduced one glitch that will probably have you scratching your head the first time you see it.

The bug is this: If you have a textarea with a width specified as a percentage (most commonly 100%), and there’s enough text in the textarea to cause it to scroll, the textarea will scroll up by a few lines for each character you type, only stopping when the line you’re editing reaches the bottom of the box (or the scrollbar reaches the uppermost position). Sometimes, when deleting text, it even scrolls up further than that, leaving your cursor somewhere outside the visible part of the textarea. Sounds fun, right?

Since the bug didn’t exist before IE8, it can be repaired by activating Compatibility View, which sends the page through the old IE7 engine instead. If you’re already doing the extra bit of work to accomodate IE7 users, this might not be a half-bad solution. But if you want to avoid regressing to an earlier version of IE and dealing with all the CSS hacks that implies, I recently found an alternate solution courtesy of the Simple Machines forum developers.

The bug is triggered when the CSS “width” property (and only that property) is set to a percentage. So how do you set width without setting “width”? By setting min-width and max-width to the same value! It looks a bit odd, but it’s perfectly standards-compliant and should be interpreted correctly by all major browsers. Do it like this:

textarea {
  width: 700px;
  min-width: 100%;
  max-width: 100%;
}

Note that the explicit non-percentage “width” value is required to avoid triggering the bug; it gets overridden by the other two properties anyway.

If you need to support IE6 (which I strongly recommend not doing unless human lives are on the line), you must keep in mind that it doesn’t understand min- and max-width, and will set the textarea to the fixed width you specify. If you’re not okay with that, you’ll want to feed a “width: 100%” declaration to IE6, probably using an alternate stylesheet linked via conditional comments.