Display problem of HTML in HTMLPanel in IE9

[Mark]

We're using 2.4 RC1

I generate the following HTML in my code:

<pre style="font-family:Lucida Console, Courier New, Monospace;color:black">                                                                          <span style="color:green">-------------------&gt;</span>

    5    10   15   20   25   30   35   40   45   50   55   60   65   70   75   80   85   90   95   100      105  110  115  120  125  130  135  140  145  150  155  160  165  170  175  180  185  190  195  200

    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |        |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |    |

aagcccaggatcgttggaggaactgcgtctgttcgtgg<span style="color:red">y</span>gag<span style="color:red">y</span>ggccgtggcaggtgaccctgcacacaacctcACCCACTCAGAGACACCTGTgtggag[g/t]ctccatcattggaaaccagtggatatta<span style="color:red">m</span>cagcCGCTCACTGTTTCTATGGGTcagtaccac<span style="color:red">r</span><span style="color:red">r</span>ctg<span style="color:red">k</span>tttt<span style="color:red">w</span>ttagttcatcttcttcacacatttata

                                                                                                         <span style="color:blue">&lt;------------------</span>

                                                                                                                                          <span style="color:green">&lt;-------------------</span></pre>

The HTML is passed into an HTMLPanel which is set as a child in a ScrollPanel.

In IE8 and FF3.6, the numbers and ticks line up as expected for a fixed font. In IE9 they are not lined up correctly. If I take the HTML above into a file inside html/body/div tags it looks correct in IE9.

Any ideas?

Thanks,

Mark

[mP]

I would suggest inspecting your page with the IE dev tools to verify
the actual font and other properties affecting the SPAN with the text
alignment problems.

Sidenote: What is that DNA of ? im just guessing its dna... i dont
really know.

[Mark]

The dev tools show the <pre> in a <div> with the correct font-families specified. Weird.

It is DNA. I'm not sure what of. Some random sequence we pulled from a database for testing.

[Mark]

Furthermore, I can copy the inner html from the dev tools DOM into a new document and display the page in IE9 and the text lines up properly. Very weird.

[Mark]

It appears to be the Lucida Console. If I remove it and use Courier New it is fine.