• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1675
  • Last Modified:

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?
0
DanRollins
Asked:
DanRollins
  • 2
1 Solution
 
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
 
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

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now