Here's my next IE challenge (or frustration). It deals with the
overflow attribute. Overflow property was a challenge on my page since
the page emulates position fixed for IE.
The present scenario deals with the pre element. Sometimes the content
in the pre container exceed the parent container's width. IE expands
the parent containers width as a result. The workaround for this
scenario relates to the overflow property and using a wrapper with the
height set to 1% . Now, IE maintains the parent container width.
Apparently, the wrapper ensures that IE renders hasLayout. I am not
exactly sure why it works, but it has predictable results.
Firefox has no need for the wrapper and still renders the page
accurately with the superfluous code. The problem relates to IE
rendering pre/wrapper with a smaller height. By controlling the
horizontal expansion; the workaround has somehow constrained the
height as well. The net effect is a vertical scroll bar, which is not
ideal.
Compare the scenario in both Firefox and IE; set the browser next to
each other; notice the div.WrapOverflow pre container height.
Screenshots are below and review the code for a full illustration.
Yes, you must be thinking change overflow auto to overflow vertical.
Let's not jump to a quick conclusion. Understanding what is going on
here is important as well. The pre container's height should grow in
IE, but the page's complexity and various hacks muddle the scenario. I
have already spent a month on this scenario, but do not have the skill
to decipher what various hacks impose on my layout. Let me know if you
have any good ideas, explanations, or suggestions on this situation.
http://neville.f2o.org/nifty_TEMP2.html