[IE BUG] lines are whited out on scroll

[GoogleCodeExporter]

When highlighting multiple code snippets on the same page in IE often
individual snippets have blank white space over certain lines.  Doesn't
happen in firefox and only happens intermittently in ie.

Attached is a screenshot example for better explanation.

Look at lines 9 and 10.

Any ideas?

Original issue reported on code.google.com by codeclip...@gmail.com on 15 Oct 2007 at 8:02

Attachments:

• syntax_highligher_iebug.jpg

[GoogleCodeExporter]

codeclipper:

  Do you have a url set up with this problem already that we can look at?

Ciao!

Original comment by docw...@gmail.com on 19 Oct 2007 at 8:07

[GoogleCodeExporter]

Original comment by docw...@gmail.com on 19 Oct 2007 at 8:07

• Changed title: IE adds extra white space

[GoogleCodeExporter]

Yes you can see it on my homepage - http://www.codeclippers.com

Original comment by codeclip...@gmail.com on 20 Oct 2007 at 12:56

[GoogleCodeExporter]

Analysis:
  How to cause this (with any source listing):
    * Load in IE6
    * Scroll up or down quickly

  What's happening:
    The elements are disappearing due to some sort of browser bug in IE.  I have
tested it in IE6.  I don't know about IE7 or IE<6.

I'm not sure what we can do about this.  I tried looking at quirksmode's bug 
list and
didn't see one that matched this particular problem.  It may be an unreported 
bug or
something else.

Ciao!

Original comment by docw...@gmail.com on 20 Oct 2007 at 5:41

[GoogleCodeExporter]

Original comment by docw...@gmail.com on 20 Oct 2007 at 9:29

• Changed title: [IE BUG] lines are whited out on scroll

[GoogleCodeExporter]

I've resolved it:

change:

.dp-highlighter ol li,
.dp-highlighter .columns div
{
    list-style: decimal-leading-zero; /* better look for others, override 
cascade from OL */
    list-style-position: outside !important;
    border-left: 3px solid #6CE26C;
    background-color: #F8F8F8;
    color: #5C5C5C;
    padding: 0 3px 0 10px !important;
    margin: 0 !important;
    line-height: 14px;
}

with:

.dp-highlighter ol li,
.dp-highlighter .columns div
{
    list-style: decimal-leading-zero; /* better look for others, override 
cascade from OL */
    list-style-position: outside !important;
    border-left: 3px solid #6CE26C;
    background-color: #F8F8F8;
    color: #5C5C5C;
    padding: 0 3px 0 10px !important;
    margin: 0 !important;
}

Another words, remove line: line-height: 14px;

Seems it works well.

Original comment by Artem.Ra...@gmail.com on 7 Jan 2008 at 11:18

[GoogleCodeExporter]

2 Artem.Razin - Respect Man, that I searched for this!

Original comment by SunFun...@gmail.com on 13 Feb 2008 at 5:02

[GoogleCodeExporter]

Probably a better solution to mine! Short of another way to do it I've been 
using
javascripts onscroll function to reload the content each time:

window.onscroll = function () {
var r = document.getElementsByTagName('div');
    for (var i=0; i<r.length; i++) {
        if (r[i].className=='dp-highlighter'){
            r[i].innerHTML = r[i].innerHTML;
        }
    }
}

Original comment by ccodl...@gmail.com on 14 Feb 2008 at 7:18