Boggle The Mind

So I bit the bullet and installed the IE 7 beta preview 2 on an extra machine at work. The install went fairly smoothly, checked out a few pages, a few small rendering issues but nothing major. Nothing, that is, until I check out some pages I had made with forms on them.

Oh no! What has happened to my beautiful forms? Their elements were completely unreadable.I took the time to play around and can definitely duplicate the behavior. It seems that when you have a standards based form, using labels, and have the text-align set to “right”, if that form is contained within a table on the page, the label element does not render properly.

(If you have IE 7 you can see the problem on this test page I’ve put up. If you don’t have IE 7 then check out the screenshot.)

Taking the form out of the table, or changing the text alignment to the left fixes the issue. However, the most usable, accessible form will have labels, and normally for usability the text will be aligned to the right.

Ok, ok - why is your form inside a table anyway, you might ask. Well on some of our older sites at work, the basic page layout is still done in tables. I know, I know - but I can’t fix everything all at once. And I’m sure I won’t be the only one with this issue.

I’ve submitted the bug to IETell@microsoft.com as they request on their blog.

Update: I submitted this bug to PPK, and he wrote back with some additional information:

“BTW: the bug seems to be generic: any element with a text-align
inside a TD has these problems.”

Thanks for the extra information!

Update 2: According to Markus at MS, this issue has been fixed in the latest builds.

This entry was posted on Thursday, February 2nd, 2006 at 9:21 am and is filed under Development. You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.