Tricklin

This issue has puzzled me for quite some time, and finally after some research I was able to figure out just what the heck was going on.

The Problem

For some odd and seemingly unexplainable reason, IE will display duplicate/repeating characters even though the code does not represent this.

...
      <div id="thumbnails" style="display:none;"></div>
      <div id="story" style="position:relative;float:right;">
         < ;p style="position:relative;float:right;">01.01.01</p>
         < ;h2>Title</h2>
         < ;p>Lorem Ipsum ...</p>
      </div>
   </div>
   <div id="footer">
      <a href="http://xxx" title="Click here to go to the main page.">home</a>
      &nbsp;|&nbsp;< br />       <a href="http://xxx" title="Click here to go to the about page.">about</a>
      &nbsp;|&nbsp;< br />       <a href="http://xxx" title="Click here to go to the photos page.">photos</a>
      &nbsp;|&nbsp;< br />       <a href="http://xxx title="Click here to go to the contact us page.">contact</a>
      &nbsp;||&nbsp;
      <a href="http://xxx" title="Click here to go to the site map.">site map</a>
      <br />
      &copy;&nbsp;20 06  <a href="http://www.tricklin.com">tricklin.com</a>
   </div>
   <!-- end 'footer' -->
</div>
<!-- end 'page' -->
...

Looks pretty legit, right? Well it is. Except IE doesn't render it correctly:

.

Why?

Well, after doing a bit of research, here is what I found:

The direct cause is nothing more than ordinary HTML comments, such as, <!-- end left column -->, sandwiched between floats that come in sequence. Apparently, the comments are hard for IE to digest when they occupy those positions, resulting in a kind of "screen diarrhea". HTML comments inside the floats do not cause the bug, nor do comments before or after the float series. Only comments residing between floats cause the bug. -- positioniseverything.net

AND

It turns out that this duplicating characters bug can be triggered by other things than just HTML comments. Phil Baines points out that any elements given the style {display: none} will also induce the bug. In fact, even hidden inputs can do it, and presumably any other elements that don't actually display for some reason. Apparently the act of hiding a source element is the critical trigger for this bug. -- positioniseverything.com

After knowing this, can you guess what I needed to do to the above code? That's correct.

The Solution

...
      </div>
      <div id="story" style="position:relative;float:right;">
         < ;p style="position:relative;float:right;">01.01.01</p>
         < ;h2>Title</h2>
         < ;p>Lorem Ipsum ...</p>
      </div>
      <div id="thumbnails" style="display:none;"></div> « move div here
   <div id="footer">
      <a href="http://xxx" title="Click here to go to the main page.">home</a>
      &nbsp;|&nbsp;< br />       <a href="http://xxx" title="Click here to go to the about page.">about</a>
      &nbsp;|&nbsp;< br />       <a href="http://xxx" title="Click here to go to the photos page.">photos</a>
      &nbsp;|&nbsp;< br />       <a href="http://xxx title="Click here to go to the contact us page.">contact</a>
      &nbsp;||&nbsp;
      <a href="http://xxx" title="Click here to go to the site map.">site map</a>
      <br />
      &copy;&nbsp;20 06  <a href="http://www.tricklin.com">tricklin.com</a>
   </div>
   <!-- end 'footer' -->
</div>
remove this altogether » <!-- end 'page' -->
...

There you have it. Another IE issue that needs a workaround. Hopefully this helps a few people from going insane.