Tuesday, September 28, 2010

IE7 ghost text

This week we ran into an odd problem with Ghost text showing up in our application  Google turned up a lot of similar problems with no clear cause or solution,  I used the development tools to help me figure out a way to solve the problem.  The scenario that it appears to cause it is if there is a div that is floating, it has a width of 100%, and a margin, then the text inside of it may cause ghost text.   Oddly, the same html did not cause the same problem everywhere on the page.

This is setup like this.

Unfortunately, I’m not sure if that is the only thing required to cause this problem.   While I tried to fix the problem it went away with several different things. 
  • When I removed float: left, the ghost text disappeared.
  • When I set margin-left: 0px; the ghost text disappeared.
  • When I changed the structure to the following the ghost text disappeared.

I went with the last option.  It kept the integrity of the rest of the CSS in place, and made the end result look the way that I wanted it to look.  I’ve seen lots of blog posts about the same problem.  Nobody, including Microsoft, seems to have a clear understanding of what the official cause is.  It only happened in some places in tye application and not in others, even though they were set up the exact same way.   For safety I changed them all to option 3.  IE7 had the problem, but IE8 did not.

A quick note on IE7 vs. IE8,  If you have IE8 installed, you can use the developer tools (F12) to change how the page displays and view it as if it were IE7.  I frequently do this while testing applications because IE7 and IE8 do not show everything the same way, sometimes you have to handle things a little bit differently.

No comments: