Hi,
I have a HTML having a table with three rows. Everything is absolutely positioned. As we go down the table, the text in the cells keeps on shifting up. This is happening in all versions of IE, including IE9. Rest of the browsers don't have this problem. Below is the HTML.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
div.Page61989 {}
.f1 {font-family:Arial;font-size:10.00pt;font-style:normal;font-weight:normal;line-height:114%;}
p.normal, table.normal, div.normal {text-align:left; text-indent:0; margin-top:0in; margin-right:0in; margin-bottom:0.0in; margin-left:0in; clear:left;}
</style>
</head>
<body>
<div class="Page61989" style="position:absolute;height:1056px;width:816px;">
<table class="normal" style="width:578.00px;border-collapse:collapse;border:1.00px solid #FF9900;position:absolute;top:328.00px;left:120.00px;">
<tr>
<td style="height:31.000px;width:192.000px;;" >
<p class="normal"><span class="f1" style=";position:absolute;top:0.00px;left:0.00px;" >This table has regular old</span><span class="f1" style=";position:absolute;top:16.00px;left:0.00px;" >square corners.</span></p>
</td>
<td style="height:31.000px;width:192.000px;border-left:1.00px solid #FF9900;" >
<p class="normal"><span class="f1" style=";position:absolute;top:0.00px;left:192.00px;" >Cell 2 Row 1</span></p>
</td>
<td style="height:31.000px;width:192.000px;border-left:1.00px solid #FF9900;" >
<p class="normal"><span class="f1" style=";position:absolute;top:0.00px;left:384.00px;" >Cell 3 Row 1</span></p>
</td>
</tr>
<tr>
<td style="height:31.000px;width:192.000px;border-top:1.00px solid #FF9900;" >
<p class="normal"><span class="f1" style=";position:absolute;top:32.00px;left:0.00px;" >Cell 1 Row 2</span></p>
</td>
<td style="height:31.000px;width:192.000px;border-top:1.00px solid #FF9900;border-left:1.00px solid #FF9900;" >
<p class="normal"><span class="f1" style=";position:absolute;top:32.00px;left:192.00px;" >Cell 2 Row 2</span></p>
</td>
<td style="height:31.000px;width:192.000px;border-top:1.00px solid #FF9900;border-left:1.00px solid #FF9900;" >
<p class="normal"><span class="f1" style=";position:absolute;top:32.00px;left:384.00px;" >Cell 2 Row 3 This table has a</span><span class="f1" style=";position:absolute;top:375.00px;left:384.00px;" >square corner defined.</span></p>
</td>
</tr>
<tr>
<td style="height:31.000px;width:192.000px;border-top:1.00px solid #FF9900;" >
<p class="normal"><span class="f1" style=";position:absolute;top:62.00px;left:0.00px;" >Added another row</span></p>
</td>
<td style="height:31.000px;width:192.000px;border-top:1.00px solid #FF9900;border-left:1.00px solid #FF9900;" >
<p class="normal"><span class="f1" style=";position:absolute;top:62.00px;left:192.00px;" >added another row</span></p>
</td>
<td style="height:31.000px;width:192.000px;border-top:1.00px solid #FF9900;border-left:1.00px solid #FF9900;" >
<p class="normal"><span class="f1" style=";position:absolute;top:62.00px;left:384.00px;" >added another row</span></p>
</td>
</tr>
</table><br style="clear:left;"/>
</div>
</body>
</html>
Any ideas?
Thanks.