IE7 layout weirdness when accessing offsetWidth/offsetHeight

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

ngdvakigyotuia@gmail.com - 19 Jul 2007 17:16 GMT

Can anyone explain, or can the IE dev team fix what's going on here?
Consider the following HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd">


<HTML><HEAD><TITLE>Test</TITLE></HEAD><BODY>
<DIV STYLE="margin: 0 30%;border:1px solid black">
<TABLE WIDTH="50%" BORDER=1>
<TR><TD><INPUT TYPE=TEXT SIZE=1 ONFOCUS="this.className='dummy1';var
x=this.offsetWidth" ONBLUR="this.className='dummy2'"></TR>
</TABLE>
</DIV>
</BODY></HTML>

This shows an input field inside a table inside a div. Whenever the
input field gets focus, the table grows by a few pixels. When the
input field loses focus, the table shrinks back.

Resolves the problem:
* Not reading the offsetWidth property (although nothing is actually
done with the read value).
* Not touching the className (note there are no styles for the dummy
classes).
* Removing the div or its margin, or setting the div's margin to a
fixed (px) size.
* Setting the table width to a fixed (non-%) size.
* Giving the div layout by adding zoom:1

Has the same problem:
* Reading offsetHeight instead of offsetWidth.
* Setting table-layout:fixed

I noticed this problem with a complex bit of code, and this is the
smallest testcase I could produce. I believe my original code did not
touch className, but touched a large number of other attributes, so I
don't think it's specific to className.

Thanks to anyone who has any insight,
Sven

Reply to this Message

PA Bear - 19 Jul 2007 19:13 GMT

I can't help you fix it but I can point you to some helpful information.
Start here http://msdn2.microsoft.com/en-us/ie/default.aspx and here
http://msdn2.microsoft.com/en-us/ie/aa740476.aspx

Signature

~Robear Dyer (PA Bear)
MS MVP-Windows (IE, OE, Security, Shell/User)
AumHa VSOP & Admin; DTS-L.org

> Can anyone explain, or can the IE dev team fix what's going on here?
> Consider the following HTML:
[quoted text clipped - 37 lines]
> Thanks to anyone who has any insight,
> Sven

Reply to this Message

ngdvakigyotuia@gmail.com - 20 Jul 2007 14:47 GMT

Thanks for the pointers, although I'm quite positive this isn't a
problem with my HTML or CSS. It looks suspiciously like an IE bug,
especially considering it's being triggered by merely accessing a
property (offsetWidth) in some javascript code.

I thought this was an IE7-only bug, but it appears to affect IE6 as
well. And to make matters more interesting, it looks like the bug
isn't the growing of the table, but rather the fact that the table was
too narrow to begin with. Setting the inner table to 100% shows it
isn't truly 100% wide until you access offsetWidth.

As I noted, this all goes away if you set hasLayout on the div. So I
guess this is just "another one of those IE hasLayout things".

> I can't help you fix it but I can point you to some helpful information.
> Start here http://msdn2.microsoft.com/en-us/ie/default.aspx and here http://msdn2.microsoft.com/en-us/ie/aa740476.aspx
[quoted text clipped - 45 lines]
> > Thanks to anyone who has any insight,
> > Sven- Hide quoted text -

Reply to this Message