Padding bug in iframe in Facebook app

Question

First post from a lurker, so please bear with me.

In my company's Facebook app, there's a form that can have error messages, which are getting double left padding. They have a fair bit of padding to line up with the inputs above them (which also get the left padding).

(Broken error message img) http://img687.imageshack.us/img687/2609/windows7x64ie9beta2.png

When I pop this same page out of the Facebook iframe, it displays normally, with form elements and error messages lining up.

(Non-broken error message img) http://img535.imageshack.us/img535/651/windows7x64ie9beta14.png

The actual code is an inherited (in all senses of the word) mess, but does work in everything including IE6 & 7 with no hacks. Here are all of the non-reset-styles on these lis:

clear: none;
font-size: 12px;
margin-bottom: 0;
margin-top: 5px;
overflow: hidden;
padding-left: 160px;

I've confirmed that doubling the padding yields the messed up view (I can only use IE Developer tools in the non-messed up view since it can't handle the iframe).

Anyone have any idea? Other than ripping up this old code and starting over?

UPDATE: Seems like ripping up the old code might be a necessity. I have some ULs with no children that might be causing some breakage.

UPDATE 2: The dynamically generated dom is a mess, but the engineers here have no time to refactor it, so I may never get the answer to this question. :(

Answer 1

This may not be an ideal solution, but I would use a condition and a separate IE9-only stylesheet to fix this issue.

Something like:

    <!--IF[IE 9]-->
      // Include IE9 stylesheet here
<![endif]-->

and in that stylesheet maybe do something like this:

clear: none;
font-size: 12px;
margin-bottom: 0;
margin-top: 5px;
overflow: hidden;
padding-left: 80px; /* half the padding */