IE6 Ghost Text Bug

I have come across this a few times before, but today it really got me. IE6 can be extremely frustrating at times. Especially due to the fact that the box model is not implemented properly. But normally these things are relatively quite easy to pick out.

Anyway I received this mark-up which I had to integrate with an existing website and came across a weird repeating text problem occurring at the bottom of the screen.

As you can see in this example, the ‘been adjusted accordingly’ was repeated twice. After doing various searches the following suggestions were repeated as causes of the problem:

1. Comments and <DIV> tags

Yes this is a common problem with IE6. Hit this before! Its all related to comments in-between floating <DIV> in sequence. Its weird because its only the last bit of content that gets repeated.

   1: <!-- IE6 does not like comments -->

   2: <div class="floating_div">

   3:   <... some markup ...>  

   4: </div>

   5: <!-- IE6 does not like comments really -->

There is reports that if you have content that wraps beyond the border of the containing div, i.e. it fills up the whole width, IE6 has a 3px buffer on the right hand side which apparently triggers the re-rendering of the text.

Solutions to this include:

a) using <!—[IF !IE]>  tags around the comment.

b) remove them – genius!

c) in the preceding float add a style {display:inline;}

d) Use –ve margins on appropriate floating divs.

Alas none of these sold my problem. I removed all the comments from the markup and the problem still occurred.

2. {display:none} or hiding specific elements

Ha i thought I did have some of these but I removed all the display:none stylings on <div> tags and problem was still apparent. So I think this is a red-herring!

3. Whitespace between list tags such as <ul>, <li> or <dl>

Browsers generally are not supposed to bother about whitespace. But IE6 has other ideas. This will work if its these tags causing the problem, but alas my mark-up was clean of this problem.

Unfortunately none of the above applied. Eventually I found a missing </DIV> tag buried in some mark-up supplied. Interestingly the mark-up had been formatted!! After putting the end tag in the web page behaved. Moral of the story – do not trust other peoples mark-up!

Of course one solution would be for people to use a modern browser such as IE7 or 8 – although the later has  a whole host of problems!! eek. Food for thought though below are the ACID 3 test results for IE6/7/8 compared with Firefox, Opera and Safari – you get the idea – more problems to come! Also bear in mind 25% of internet users still use IE6 which is now 8 years old!

Acid Test 3

Acid Test 3 Results

Firefox (3.5.30729): 93%
Safari (4.0): 100%
Opera (9.64): 85%
Chrome (2.0.172): 100%
Internet Explorer (8.0.6): 20%
Internet Explorer (7): 12%
Internet Explorer (6.0.2): 12%