Home » General » Ghost Text issue with IE6.0

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.

————

About these ads

1 Comment

  1. Sam Davies says:

    Useful tip! I’ll make sure i use this if it comes up again ;-)

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

Follow

Get every new post delivered to your Inbox.

Join 81 other followers

%d bloggers like this: