The way textarea.js rewrites the DOM triggers rendering bugs in IE/Win 6 (at least) on themes where any ancestor of a resizable textarea has margins. This includes, among others, Garland in Drupal 5. The problem occurs because textarea.js reparents the textarea field to a new div that has an explicit width assigned, granting hasLayout and triggering the bug.

See http://jaspan.com/ie-inherited-margin-bug-form-elements-and-haslayout for a discussion.

Patch for Drupal 5 attached.

Comments

bjaspan’s picture

FileSize
1.09 KB

Patch for 4.7 attached.

I should add that I marked this bug 'critical' because the rendering problems can be quite ugly, even with our default themes, and thus make Drupal look bad on the most popular web browser.

webchick’s picture

Priority: Critical » Normal

Marked http://drupal.org/node/101207 a duplicate of this bug.

And this bug is not critical. Critical bug status is reserved for bugs that severely break functionality in Drupal. "Looking ugly" doesn't qualify. :)

bjaspan’s picture

Status: Active » Needs review

You're right, it isn't critical.

I did provide a patch (for 4.7 and 5.0) so I set the status to code needs review.

Dries’s picture

I don't have IE6 so I can't test this. Someone else will have to make a final decision on this patch.

dvessel’s picture

Here's a screeny in IE 6. Looks good but it should be checked in 5.5 also.

How about getting rid of the long class. A comment explaining why the span's there should be good enough.

http://browsershots.org/png/full/85/8560098fcd629927fd215bd53e748bfb.png

mbaze’s picture

How does one apply this patch in 4.7?

Fajan’s picture

Am using Drupal 5rc1 and the Garland theme. There is indeed a rendering bug in IE6. It causes the textarea to shift to the left in relation to the grippie, in my case causing the 1st few columns of the textarea to be clipped. The v5 patch above does prevent this rendering bug.

Paul Natsuo Kishimoto’s picture

Version: 5.0-beta2 » 5.0-rc1
ChrisKennedy’s picture

I don't see this using HEAD and IE6. It may have already been fixed by jQuery 1.0.4 or other fixes since rc1.

bjaspan’s picture

It is not a bug in jQuery and so would not be affected by the upgrade to 1.0.4.

textarea.js in CVS HEAD still reparents textareas below a div with class resizable-textarea with a CSS width field. Therefore, the problem still exists.

drumm’s picture

Status: Needs review » Closed (fixed)

I can resize a textarea in IE6 and RC2 without problems.

bjaspan’s picture

Version: 5.0-rc1 » 5.x-dev
Status: Closed (fixed) » Reviewed & tested by the community
FileSize
1.07 KB

drumm closed this issue, saying "I can resize a textarea in IE6 and RC2 without problems." That's great, but the bug is not about being unable to resize a textarea. Please re-read the description.

I count two commentors on this issue, plus myself, who have verified the bug and confirmed that this fix works. I have re-rolled the patch for DRUPAL-5 HEAD. It is ready to be commited for 5.x-dev and 6.x-dev.

alanburke’s picture

Should I be able to apply this to 5.0 final?
[Can't seem to get it to apply]

alanburke’s picture

Well, Though I can't apply the patch, the concept seems fine.

I was having issues with textareas meesed up on;
-Zen theme [Textaears floated Way off to the right]
-Garland [Floated Hidden to the left]

On IE 6 and IE7

By Editing line 7 in textarea.js

   $(this).wrap('<div class="resizable-textarea"></div>')

to

   $(this).wrap('<div class="resizable-textarea"><span></span></div>')

it sorted out.
Thanks for the help
Alan

bjaspan’s picture

Version: 5.x-dev » 6.x-dev

The patch I most recently uploaded was accidentally for 4.7, not 5. I am now attaching a patch rolled against Drupal 5.0/HEAD (for now, they are the same).

I'm setting the Version to 6.x since all patches are supposed to start against HEAD. Once it is applied to HEAD, it should be applied to 5.0 and 4.7 (using the patch file earlier in this issue).

bjaspan’s picture

Status: Reviewed & tested by the community » Needs review

Apparently I mis-understood the process for patch status updates and should not have marked this "ready to be committed."

The patch is done, several people have verified the bug and the fix, and it is ready for 4.7, 5.0, and 6-dev. I think an obvious and unattractive rendering flaw with our default theme on IE 6 and 7 is a pretty big problem (even though it is IE's fault, not Drupal's) and the fix ought to be committed.

Steven’s picture

Status: Needs review » Needs work

The patch appears to be missing?

There doesn't appear to be another fix for this, so we'll just have to apply it.

bjaspan’s picture

Status: Needs work » Needs review
FileSize
870 bytes

My bad. Patch for 5.0/HEAD re-attached. The originally attached patch for 4.7 (update #1) is still valid. Actually, the original patch for 5.0/HEAD (initial post) is, too; the only change between the original and this one is that I removed class="resizable-textarea-ie-hack" from the new <span> tag. I don't think it matters if it is present or not.

kdebaas’s picture

FileSize
29.07 KB

My symptom: see this issue. When working with Drupal 5.0, using the Zen Theme, when viewing in Internet Explorer 6, the main (middle) column on page /node/add/story slips underneath the left sidebar.

When I scroll down to look at the textareas, they seem misaligned. (see attached screenshot).

I applied the latest patch, and this solved that problem.

Environment: Windows XP, Internet Explorer 6, Server: Apache 2 on Linux, PHP 5.1.6.

jjeff’s picture

We're having this problem with the Zen theme. My understanding is that all this adds is a 'span' element inside the wrapper div. There's really no easy way to fix this at the theme or module level.

+1 on this, most definitely!

sebastianrs’s picture

Thanks a bunch for the patch! Me be lucky now since this time, I didn't spend 6 hours on figuring out what was causing this ugly bug in IE6/IE7!

jacauc’s picture

Worked for my, using zen and IE7
+1
Thanks!

RobRoy’s picture

Status: Needs review » Needs work

If you are going to put a link in the code comments, it should be to this issue on d.o not a 3rd-party site. IIRC linking to issues in code comments is discouraged as well.

bjaspan’s picture

FileSize
790 bytes

Not linking to a third-party site is sensible, though in fact the Drupal 5 source contains links to php.net, w3.org, zend.com, bugs.php.net, and xmlrpc.com in comments. However, linking to a d.o issue that explains an otherwise obscure piece of code (there is no standards-compliant benefit to wrapping an empty around something) seems like a really good idea.

Nevertheless, I'm attaching new patch files with no link at all. Here is the 5/HEAD patch.

bjaspan’s picture

FileSize
953 bytes

Here is the 4.7 patch.

bjaspan’s picture

Status: Needs work » Needs review
larrychu’s picture

I am using this patch as well. It's working for me for zen-fixed, IE6, Drupal 5.1. Nice work!

zirafa’s picture

+1 Great patch. Fixed the problem in IE7, IE6, and IE5.5 for Drupal 5.1 using the Zen theme.

bjaspan’s picture

Status: Needs review » Reviewed & tested by the community

Six people have confirmed that this patch solves the problem but have not marked it RTBC, so I am.

samo’s picture

Thank you for this fix bjaspan. This has solved a very elusive issue to fix.

This bug has caused the entire #main content area to be pushed below #sidebar-left using the Zen theme and the IE/6 browser on Windows.

Thanks again -- this would have been very difficult to track down........

Rob T’s picture

bjaspan's patch in #24 worked well for me in my 5.1, heavily modified Zen theme.

Thanks for the patch!

kadboo’s picture

#24 works. thanks bjaspan !

Sebastiaan Brozius’s picture

The patch from bjaspan seems to do the tricks for me, also... :D

Dries’s picture

I'd love to commit this, but I'm not sure this is the right solution. I'd like to invite Steven, nedjo or another jQuery expert to cast their vote.

bjaspan’s picture

Dries, this is not a jQuery issue, it is an IE bug workaround. I've provided patches for 4.7 and 5 version of textarea.js because that is where the IE bug is triggered, not because the bug or patch has anything to do with JavaScript.

Please read http://positioniseverything.net/explorer/inherited_margin.html for details about the IE bug and fix.

andrewfn’s picture

This patch works great for me on several Drupal 5.1 sites.

andrewfn’s picture

This patch works great for me on several Drupal 5.1 sites.

Dries’s picture

Version: 6.x-dev » 5.x-dev

I've committed this to CVS HEAD. Lowering the version number so Neil can evaluate this for Drupal 5.

Zen’s picture

Wrong patch committed. The right patch is #24 without the URL.

And a belated "thank you" to Barry. I've actually been using this fix for a while now, but couldn't remember where I'd got it from. Cheers :)

-K

Rob T’s picture

The 5.0 patch worked well. Thanks for the efforts.

bjaspan’s picture

You're welcome!

It isn't clear from the comments which versions (besides HEAD) it has been committed to.

Zen’s picture

drumm’s picture

Version: 5.x-dev » 4.7.x-dev

Committed to 5.

I think I noticed a 4.7 patch.

Zen’s picture

Wrong patch committed (again).

drumm’s picture

zen: is there a difference in the actual code? Can you post a diff between what is in CVS now and what it should be?

Zen’s picture

Version: 4.7.x-dev » 6.x-dev
FileSize
834 bytes

@drumm: No. Just the comment.

I'm reassigning this to 6-dev with the fix.

Thanks,
-K

Dries’s picture

Status: Reviewed & tested by the community » Needs work

This doesn't look like the right patch either -- patch doesn't apply.

Zen’s picture

Status: Needs work » Reviewed & tested by the community

Dries: I just tested it on HEAD and the patch applies fine. It's just a one-liner ...

Gurpartap Singh’s picture

The fix works well for Drupal 5.x too. Verified.

greencheetah’s picture

Version: 6.x-dev » 5.1

Holy crap. I manually patched this in 5.1 and it worked! Thanks.

Gurpartap Singh’s picture

Version: 5.1 » 6.x-dev

This is expected to go into 6.x-dev before a port patch will be committed to 5.x-dev.(AFAIK)

ChrisKennedy’s picture

Status: Reviewed & tested by the community » Fixed

All that is left for this is a one-line comment change as posted in #46; no testing or porting is needed. However, I'm marking this as fixed since apparently no one minds the inclusion of the URL in the comment.

bjaspan’s picture

Version: 6.x-dev » 4.7.x-dev
Status: Fixed » Reviewed & tested by the community

Great! This is now fixed in 6.x and 5.x. Only 4.7.x remains. The patch in comment #25 is still correct for 4.7 and ready to be applied.

killes@www.drop.org’s picture

Ok, which one should I pply to 4.7?

bjaspan’s picture

Apply #25 to 4.7.

killes@www.drop.org’s picture

Status: Reviewed & tested by the community » Fixed

applied

mr.andrey’s picture

Status: Fixed » Active
FileSize
353.92 KB

Hello,

Even with the above patch and workarounds, I'm still getting the problem where the right menu gets pushed down. Attached are two screenshots - IE (problem) and Firefox (how I want it to work). Any ideas?

Thanks,
Andrey.

recidive’s picture

Status: Active » Fixed

@mr.andrey: your problem is nothing to do with that patch. Can you reproduce this using Garland? If not, it might be a theme issue.

mr.andrey’s picture

Found a solution.. kind of:

in layout.css:

#squeeze {
  position: relative;
  padding: 0 1em;
  width: 530px; /* added */
  word-wrap: break-word; /* added */
}

I'm ok with the fixed width, so this will work. Any other ideas are much appreciated!

Thanks,
Andrey.

Anonymous’s picture

Status: Fixed » Closed (fixed)
mysty’s picture

Version: 4.7.x-dev » 5.2
Priority: Normal » Minor
FileSize
60.31 KB

This one still seems to be lurking for me on XP-SP2 with IE6 (not by choice). Of course it's fine and lovely dandy on windows with Safari, Opera Firefox.. @recidive I'm using an unmodified Zen theme.

So I've checked that the /misc/textarea.js has the patch/workaround kindly highlighted here and the workaround is in there, but I'm still getting this IE display bug.

I was hoping the workaround was proven as per a number of cases above so it's a drag it's back for me.

It would be great to be able to use the Zen as a theme foundation but this bug is making it hard.

Anyone with ideas? TIA

mysty’s picture

uerks, looks even worse with the unmodified zen fixed theme

recidive’s picture

Project: Drupal core » Zen
Version: 5.2 » 5.x-1.x-dev
Component: javascript » IE Problems
Priority: Minor » Normal
Status: Closed (fixed) » Active

Moving to the correct project.

bjaspan’s picture

Project: Zen » Drupal core
Version: 5.x-1.x-dev » 5.x-dev
Component: IE Problems » theme system
Status: Active » Fixed

This newly reported issue with the Zen theme has nothing to do with the originally reported and fixed problem with IE6 and textareas. In fact, there are no textareas or other form input elements in the new screenshots.

It is important and useful to keep old fixed bug reports intact for future reference, so we should not re-use this issue for all IE6 theme bugs. Therefore, I am putting this back to the Drupal project and marking it fixed again.

You can and should of course submit a new issue for the Zen project for this bug. Thanks!

Anonymous’s picture

Status: Fixed » Closed (fixed)