Repeated 'phantom' or 'ghost' text display error in Internet Explorer

Thursday, 9 March 2006

Now that so many people are switching to more modern browsers like Firefox and Opera, which support web standards, Microsoft has finally decided to upgrade its own browser. It's about time too; IE has changed little in terms of functionality since version 5 with most of the additions being of little use to the average user. Most of the work seems to have been fixing various security problems. But now a new browser is on the way, we can hope that it will address many of the less serious problems with IE that Microsoft hadn't bothered to fix previously.

While working on the upcoming version of our CactuShop shopping cart package, we've been heavily involved in rebuilding the entire interface code in XHTML/CSS. During this period we've been working with Firefox, IE and Opera, but IE proved yet again to be by far the most problematic to code for. The problem is not just the non-standard way it interprets some CSS, which is widely documented elsewhere. There are just plain bugs in how it renders pages.For example, one of our pages had a strange piece of 'phantom text' appearing, which appeared to be a section of text from elsewhere that was repeated on the page for no apparent reason. It did not display on other browsers. We stripped down the code in question to isolate the salient features of what caused the error. Some of the elements we have such as the div after the body tag don't need to be there for the bug to manifest itself, but we've added them in where necessary so the page validates.

Phantom text example (view in IE6/7 to see the error)

<!--  --><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xml:lang="en" xmlns="" lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Phantom Text in IE</title>
<input type="hidden" />
<input type="hidden" />
<input type="hidden" />
<div class="section" style="width: 100%; float: left;">Here's some text that gets
repeated below in IE for no reason at all. 1234567890</div>

When you view this in Firefox or Opera, you see a sentence with the numbers 1234567890 after it - just as it should be. However, when viewed in Internet Explorer, the numbers 567890 are repeated inexplicably below the line of text. A combination of factors seems to contribute to or affect what happens:

  1. The comment at the top of the source
  2. The hidden fields - the more there are of these, the more of the text that gets repeated. Also, they must have carriage returns after them in the source
  3. The width of 100% and float:left; on the 'section' div.

Of course, from a strict CSS point of view, there is no point having the width set to 100% and then floating the 'section' div. If you reduce the width to 99%, it cures the problem, as does removing the float. So MS *could* argue that this is bad CSS. However, it is within the rules and seems to pass validation at the W3C and on other validators we use. Also consider that you may have the 'section' class to set the div to 100% width, with the 'float' being inherited from another class (this was actually what was happening on our code when we discovered the issue).

As stated above, the number of characters above depends on the number of hidden fields. It seems to be determined by the following formula:

repeatedcharacters = (hiddenfields - 1) x 3

Microsoft have a 'new' browser on the way in the form of IE7, which is available as beta for Windows XP and will be the default browser on Windows Vista which should come out later this year. Unfortunately, our tests were run both with IE6 and the IE7 beta, and the same bug happens in both. Much has been made of Microsoft making IE7 standards compliant, but these kind of bugs suggest that the rendering engine hasn't really had major heart surgery, more like a slap on the backside and a warning to stay away from chip butties. Of course the final release version could be different, but we suspect it probably won't.

comments powered by Disqus
Powered by kartris