Text disappears in IE8 comapatibility mode

In certain situations, clicking on a page makes text disappear when viewed in IE8.  I'd like to know if there is a way to avoid the problem at the page source-code level.

Here's how to reproduce the problem:

1) Start IE8.  Set it to Compatibility View
     (the "broken page" icon next to the Refresh button will appear shaded, blue)
2) Go to this URL:  http://e-e.com/A_2801.html
3) Upper right-hand corner, locate "Skin" and set it to "Premium"
4) Scroll down  until you can see the top of the "Comments" container box.
5) Click in the body of the text, or anywhere that there is no hyperlink.

A bunch of text will disappear.

PLEASE DO NOT tell me to switch out of compatibility mode.  Do not tell me to change settings in my browser.  Do not tell me to use a different browser.  Thanks!

My Question:
What is there about the HTML or the CSS or the event handling of this page that makes the text disappear?  Is there any way to avoid the problem by modifying the page source?
LVL 50
DanRollinsAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

remorinaCommented:
Hi DanRollins,
I've run through this issue several times and it has always been pain to fix everytime.
What I've realized that this has something to do with IE not bahving well with floats and overlapping elements.

In the example you provided, if you use the IE8 developer tool and try to point out the content area using the arrow, and click on the <div class="articleBody"> in the HTML code to highlight it in blue, then click on the one below it <div class="articleInfo"> you'll notice that they're overlapping.

the easy fix to this was by giving the zoom:1 css property to the container having the disappearing text/content, but sometimes also using proper clearing and overflow:hidden fixes the issues.

For example in the provided link if you use the css editor and add an overflow:hidden to the <div class="articleBody"> you'll notice that it corrected its overlap with the below div and the issue doesn't happen anymore, but only happens to the <div class="articleInfo"> now

Also giving it a zoom:1 fixes it

Now being zoom:1 is not a standard CSS property and most of the time I wanted my code to validate W3, When I couldn't use the overflow:hidden or it wouldn't work otherwise, I used IE conditional statements ONLY to provide the zoom:1 property to the elements that produced such behavior, since I'm totally against conditional CSS and consider it a lack of skill.

I hope this helps in anyway

Cheers
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
remorinaCommented:
You can also find more info about the Has Layout IE bug here
http://www.satzansatz.de/cssd/onhavinglayout.html
0
DanRollinsAuthor Commented:
That sounds great.  Thanks.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Browsers

From novice to tech pro — start learning today.