Error filling iframe in Facebook application

Question

The first message from the lurker, so please carry me.

There is a form in the application for my Facebook company that may contain error messages that receive a double left-handed add-on. They have a fair bit of padding to line them up over inputs (which also get a left pad).

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

When I go to the same page from Facebook iframe, it displays normally when form elements and error messages line up.

(Undestructed img error message) http://img535.imageshack.us/img535/651/windows7x64ie9beta14.png

The actual code is an inherited (in every sense of the word) mess, but it works in everyone, including IE6 and 7 without hacks. Here are all the non-w70> styles on these lis:

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

I confirmed that doubling the padding gives a messy look (I can only use IE Developer tools in a non-up-to-date view, since it cannot handle iframes).

Does anyone have an idea? Besides copying the old code and the beginning?

UPDATE: It seems like copying old code might be necessary. I have several UL without children, which can cause some damage.

UPDATE 2: dynamically created dom is a mess, but the engineers here do not have time to reorganize it, so I can never get an answer to this question .:(

Answer 1

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

Sort of:

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

and in this stylesheet it is possible to do something like this:

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

Answer 2

Do you use floats? I reached this question with a similar problem.

Mark this answer: Problem with IE9 CSS Float!