www.tuljo.com

ie6-character-leak, and space below

Is IE6 a bad guy or a good guy, is it time for IE6 to die or not (don't be racist!), 20% of Internet users are still using IE6 today, in the middle of year 2009.

1. One phenomena related to IE6 is a character leak.
2. Second mystery is a double space below.

Definitely, there is set of fixed rules and math that handle everything.

Some magic advices googled from the Internet. Sometimes these avices help, sometimes not.

• IE Duplicate Characters Bug. At the end of page there are some desorientated characters.
  1. The bug is triggered only when the final float fills the container to the right edge, or to within less than 3px away from it. This is because IE6/win seems to have a weird 3px "bumper" margin on the right side of that last left float.
  2. Helps setting clear:both; between the last div and a preceeding element, for example <div style="clear:both;">&#160;</div>
  3. Helps sometimes   - </p>&#160;</div>
  4. Try to set a 100% width to 99%
  5. Helped applying *clear:both;*float:none; to the div that leaked characters (it had to touch the wall of surrounding div).

Some observations.

A case study. Doc type is XHTML 1.0 Transitional here.

We have got 3 divisions:

1. inner element, has some text inside,
2. between div, surrounds the inner one,
3. outer div, surrounds the between one.

If distance between the Inner and the Between is less than 3px, IE6 adds some space below the inner element. That occurs usually when the Inner has a declared width that gets closer than 3 px.

If distance between the Between and the Outer is less than 3 px, the Inner doubles last characters and leaks them outside itself.

Distance between the Between and the Outer becomes less than 3 px if:

1. width of the Between is declared to be so,
2. the Between is pushed by the Inner (Inner is expanded by some content inside).

The more inner-div like divs preceed to it, the more bespoke one leaks.

Placed just a not-styled div around the inner-div - leakage stopped.

Case A.

If something touches div's right wall from inside, the div leaks some characters placing them below himself.

Floatedness doesn't play any role here.

Leave at least 3px distance. Make the inner div 3px narrower.

This construction doesn't work:

• .outmost{padding-right:3px;width:123px;}
• .next-to-outmost{width:100%;}

This construction works:

• .outmost{width:123px;}
• .next-to-outmost{width:120px;}

Case B.

Most often the leak happens when the outmost div of the html page is touched by any of the inner divs.

Case C.

In combination with several other conditions, anything that touches the right wall, can cause any other same level div, that's located above, to leak.

Conclusion

For IE6 - leave at least 3 px space right of every division,

• i.e. every surrounding division has to be at least 3 pixels wider,
• i.e. each inner div has to be narrower for 3 px.

Frequently, all 100% widhts will cause IE6 character leak or double space.

Frequently, mixed 100% and fixed -3px widths are OK.

Almost aways, all -3px fix widths are bulletproof.

Another case

Sometimes an element X somewhere many floors above triggers the leak from an element on the bottom. All those 3px spaces doesn't help.

Placing <div><!-- --></div> right after the element X stops the leak below.

More folklore from WWW

• using tags around the comment.
• remove the comment
• in the preceding float add a style {display:inline;}
• Use –ve margins on appropriate floating divs.
• adding extra   (like 10 spaces) to the orginal text (the hacky way)

2009.

Web Development - XHTML CSS JavaScript jQuery.