General

Ghost Text issue with IE6.0


I was facing an issue with IE6.0. This issue happens only on IE6.0, same code works fine on other higher version of IE and Firefox Internet explorer. I have referred http://www.impressivewebs.com/ie6-ghost-text-bug-with-multiple-solutions/ link to resolve this and tried many other possible solutions but could not find a solid solution.

What is the IE6 Ghost Text Bug?

Due to a bizarre rendering error in IE6, a well-organized, W3C-compliant web page that contains clean, semantic markup, and that looks perfectly fine in all other browsers (IE7, Firefox, Opera, Safari, etc.), will sometimes display duplicate text in a DIV that is floated and is followed by an HTML comment. The consensus is that the bug occurs when multiple comments are placed between a series of floated DIV tags, with the actual bug taking place inside the final floated DIV.

Actual Fix:

————–

This is very strange as IE6.0 will have trouble rendering when we use <ul> & <Li> within div control. In my project we were using a list (ul) and each list item (li) contained a header (h2) and image (img). After reading this post http://benstewart.net/2008/05/ie6-ghost-text-bug/ I tried removing below code

<ul id=”nav-pageactions”>

<li id=”pa-list-view”><a title=”List view”>List view</a> </li>

<li id=”pa-grid-view”><a title=”Grid view”>Grid view</a> </li>

</ul>

And to my surprise it worked like charm. Now instead of removing the above code I wrapped above code in another <div> as shown below

<div>

<ul id=”nav-pageactions”>

<li id=”pa-list-view”><a title=”List view”>List view</a> </li>

<li id=”pa-grid-view”><a title=”Grid view”>Grid view</a> </li>

</ul>

</div>

After doing above change it seems to work fine.

Apart from above changes I have tried many things which did not work

1) Margin for <Div> control with Float attribute- I tried to set left margin for right div and right margin for left div, but it did not solve the problem.

2) We are using <Div> control and Table control both for Grid view, We tried converting all Table controls to Div controls but even this did not work out

3) White Space: It seems white space is the major problem with IE6.0. This blog has more info (http://benstewart.net/2008/05/ie6-ghost-text-bug/)- we tried to put some hack but even it did not work for all scenarios.

4) Having a WRAPPER for actual Grid view- As initially I thought ghost is appearing only in Grid view the problem is with that div only.

5) Adding extra space (TR, TD) for main table in grid view.

Lesson Learnt:

1) While targeting your application as IE6.0 compatible, make sure “You know the limitation of IE6.0” while designing CSS

2) Smartly use <Div> specially floats div with lots of data in it.

3) Be care full with White Space as IE6.0 does not handle white space nicely.

————

One thought on “Ghost Text issue with IE6.0

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s