Absolute positioning in tables - text shifting up in IE, rest of the browsers show it correct.

Tuesday, July 31, 2012 7:09 PM

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.

All Replies

Tuesday, July 31, 2012 9:22 PM

1
for questions about html, css and scripting for website developers post to the IE Web development forum at msdn - http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/threads with a link to your website (they need to inspect your server response headers)...

tip: use a reset.css to set you default style rules for ALL browsers to be the same.

Use the FX Developer tool extension, the Opera DragonFly developer tool or the Safari Inspect Element extension to determine the default style rules for elements applied by those browsers....

absolute positioning does not work on mobile device web browsers. Different document modes in IE browsers causes different outcomes. use the layout flow of elements for positioning.
Rob^_^
- Marked As Answer by writetonsharma Wednesday, August 01, 2012 4:12 AM
- Reply
- Quote
Wednesday, August 01, 2012 4:10 AM

0
hi Rob.. That did it (css reset). Just wonderful. I was looking for the solution since sometime but didn't get any replies anywhere. Thank you so much. :-)

I am not an HTML/CSS expert, so don't know browser internals. I will use the tools you suggested.

For the code, this is generated from a HTML driver and so to put elements, absolute positioning is necessary (The HTML editor works on positions). We are working on developing the next version of driver which would generate HTML for mobile devices and which will not have any positions with limited features.

Can you suggest, how should I go developing for mobile devices? What things I need to take care of? How to fit the big screen on small screen ? I was reading about responsive design, will it work?

Edit: This is not related to websites. We generated formatted custom statements and output them in various formats like html, pdf, ps, afp, pcl etc.. Do I need to move this to the correct forum ?

ns
- Edited by writetonsharma Wednesday, August 01, 2012 4:12 AM
- Reply
- Quote
Wednesday, August 01, 2012 7:44 PM

0

jQuery.mobile mobione.com - canvas mobile web IDE. dzone.com
Rob^_^
- Reply
- Quote

Thursday, August 02, 2012 6:49 AM

hi Rob.. I think resetting the CSS did help but still, slowly IE misplace the text. When i created the HTML by increasing the row's, it was visible. Instead of above table, if I use the below table, it can be seen.

<table class="normal" style="border-spacing:0.00px;width:99.00px;border-collapse:collapse;border:1.00px solid #000000;;position:absolute;top:70.00px;left:14.00px;">
<tr>
<td style="height:17.000px;width:96.000px;;;" >
<p class="normal"><span class="f1" style="color:#FF0000;position:absolute;top:2.00px;left:1.00px;" >11111</span></p>
</td>
</tr>
<tr>
<td style="height:17.000px;width:96.000px;;border-top:1.00px solid #000000;;" >
<p class="normal"><span class="f1" style="color:#FF0000;position:absolute;top:19.00px;left:1.00px;" >21111</span></p>
</td>
</tr>
<tr>
<td style="height:17.000px;width:96.000px;;border-top:1.00px solid #000000;;" >
<p class="normal"><span class="f1" style="color:#FF0000;position:absolute;top:36.00px;left:1.00px;" >31111</span></p>
</td>
</tr>
<tr>
<td style="height:17.000px;width:96.000px;;border-top:1.00px solid #000000;;" >
<p class="normal"><span class="f1" style="color:#FF0000;position:absolute;top:53.00px;left:1.00px;" >41111</span></p>
</td>
</tr>
<tr>
<td style="height:17.000px;width:96.000px;;border-top:1.00px solid #000000;;" >
<p class="normal"><span class="f1" style="color:#FF0000;position:absolute;top:70.00px;left:1.00px;" >51111</span></p>
</td>
</tr>
<tr>
<td style="height:17.000px;width:96.000px;;border-top:1.00px solid #000000;;" >
<p class="normal"><span class="f1" style="color:#FF0000;position:absolute;top:87.00px;left:1.00px;" >61111</span></p>
</td>
</tr>
<tr>
<td style="height:17.000px;width:96.000px;;border-top:1.00px solid #000000;;" >
<p class="normal"><span class="f1" style="color:#FF0000;position:absolute;top:104.00px;left:1.00px;" >71111</span></p>
</td>
</tr>
<tr>
<td style="height:17.000px;width:96.000px;;border-top:1.00px solid #000000;;" >
<p class="normal"><span class="f1" style="color:#FF0000;position:absolute;top:121.00px;left:1.00px;" >81111</span></p>
</td>
</tr>
<tr>
<td style="height:17.000px;width:96.000px;;border-top:1.00px solid #000000;;" >
<p class="normal"><span class="f1" style="color:#FF0000;position:absolute;top:138.00px;left:1.00px;" >91111</span></p>
</td>
</tr>
<tr>
<td style="height:17.000px;width:96.000px;;border-top:1.00px solid #000000;;" >
<p class="normal"><span class="f1" style="color:#FF0000;position:absolute;top:155.00px;left:1.00px;" >10111</span></p>
</td>
</tr>
<tr>
<td style="height:17.000px;width:96.000px;;border-top:1.00px solid #000000;;" >
<p class="normal"><span class="f1" style="color:#FF0000;position:absolute;top:172.00px;left:1.00px;" >11111</span></p>
</td>
</tr>
<tr>
<td style="height:17.000px;width:96.000px;;border-top:1.00px solid #000000;;" >
<p class="normal"><span class="f1" style="color:#FF0000;position:absolute;top:189.00px;left:1.00px;" >12111</span></p>
</td>
</tr>
<tr>
<td style="height:17.000px;width:96.000px;;border-top:1.00px solid #000000;;" >
<p class="normal"><span class="f1" style="color:#FF0000;position:absolute;top:206.00px;left:1.00px;" >13111</span></p>
</td>
</tr>
<tr>
<td style="height:17.000px;width:96.000px;;border-top:1.00px solid #000000;;" >
<p class="normal"><span class="f1" style="color:#FF0000;position:absolute;top:223.00px;left:1.00px;" >14111</span></p>
</td>
</tr>
<tr>
<td style="height:17.000px;width:96.000px;;border-top:1.00px solid #000000;;" >
<p class="normal"><span class="f1" style="color:#FF0000;position:absolute;top:240.00px;left:1.00px;" >15111</span></p>
</td>
</tr>
<tr>
<td style="height:17.000px;width:96.000px;;border-top:1.00px solid #000000;;" >
<p class="normal"><span class="f1" style="color:#FF0000;position:absolute;top:257.00px;left:1.00px;" >16111</span></p>
</td>
</tr>
<tr>
<td style="height:17.000px;width:96.000px;;border-top:1.00px solid #000000;;" >
<p class="normal"><span class="f1" style="color:#FF0000;position:absolute;top:274.00px;left:1.00px;" >17111</span></p>
</td>
</tr>
<tr>
<td style="height:17.000px;width:96.000px;;border-top:1.00px solid #000000;;" >
<p class="normal"><span class="f1" style="color:#FF0000;position:absolute;top:291.00px;left:1.00px;" >18111</span></p>
</td>
</tr>
<tr>
<td style="height:17.000px;width:96.000px;;border-top:1.00px solid #000000;;" >
<p class="normal"><span class="f1" style="color:#FF0000;position:absolute;top:308.00px;left:1.00px;" >19111</span></p>
</td>
</tr>
<tr>
<td style="height:17.000px;width:96.000px;;border-top:1.00px solid #000000;;" >
<p class="normal"><span class="f1" style="color:#FF0000;position:absolute;top:325.00px;left:1.00px;" >20111</span></p>
</td>
</tr>
<tr>
<td style="height:17.000px;width:96.000px;;border-top:1.00px solid #000000;;" >
<p class="normal"><span class="f1" style="color:#FF0000;position:absolute;top:342.00px;left:1.00px;" >21111</span></p>
</td>
</tr>
<tr>
<td style="height:17.000px;width:96.000px;;border-top:1.00px solid #000000;;" >
<p class="normal"><span class="f1" style="color:#FF0000;position:absolute;top:359.00px;left:1.00px;" >22111</span></p>
</td>
</tr>
<tr>
<td style="height:17.000px;width:96.000px;;border-top:1.00px solid #000000;;" >
<p class="normal"><span class="f1" style="color:#FF0000;position:absolute;top:376.00px;left:1.00px;" >23111</span></p>
</td>
</tr>
<tr>
<td style="height:17.000px;width:96.000px;;border-top:1.00px solid #000000;;" >
<p class="normal"><span class="f1" style="color:#FF0000;position:absolute;top:393.00px;left:1.00px;" >24111</span></p>
</td>
</tr>
<tr>
<td style="height:17.000px;width:96.000px;;border-top:1.00px solid #000000;;" >
<p class="normal"><span class="f1" style="color:#FF0000;position:absolute;top:410.00px;left:1.00px;" >25111</span></p>
</td>
</tr>
</table><br style="clear:left;"/>

Other browsers will not show this problem.

Edit: I am posting this to the correct forum. Don't know how to move the thread.

Thanks.

Edited by writetonsharma Thursday, August 02, 2012 8:51 AM
Edited by writetonsharma Thursday, August 02, 2012 9:03 AM

Absolute positioning in tables - text shifting up in IE, rest of the browsers show it correct.

All Replies

Products

Resources

Solutions

Updates

Trials

Related Sites

Training

Certifications

Other resources

Support by product

Other support links

Not an IT pro?